/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f8f8f8;
    color: #333;
    line-height: 1.6;
    min-width: 480px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header Styles */
header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

/* Cart icon, sign-in button and the user menu sit side by side; without
   this the block-level dropdown wraps below the cart icon and stretches
   the header. */
.auth-section {
    display: flex;
    align-items: center;
    gap: 18px;    /* ~half the 36px user-icon width */
}

.logo {
    width: 180px;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #46c0ed;
}

.auth-button {
    background-color: #46c0ed;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.auth-button:hover {
    background-color: #3aa8d2;
}

/* User Dropdown Styles */
.user-dropdown {
    display: none;
    position: relative;
}

.user-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #46c0ed;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.user-icon:hover {
    background-color: #3aa8d2;
}

.user-menu {
    display: none;
    position: absolute;
    top: 45px;
    right: 0;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    min-width: 200px;
    z-index: 100;
}

.user-email {
    display: block;
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    transition: color 0.3s;
}

.user-email:hover {
    color: #46c0ed;
}

.user-menu-link {
    font-size: 0.9rem;
    color: #333;
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.user-menu-link a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}

.user-menu-link a:hover {
    color: #46c0ed;
}

.logout-button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    width: 100%;
}

.logout-button:hover {
    background-color: #d32f2f;
}

.flash-message {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 10px 10px;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 930;
}

.photo-menu {
    display: none;
    position: fixed;
    width: 90%;
    top: 50%;
    left: 50%;
    padding: 15px;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 910;
}

.photo-menu-button {
    color: black;
    background-color: #cccccc;    
    width: 95%;
    padding: 10px;
    margin: 5px;
    border-radius: 4px;
    font-size: 1.1em;
}

/* Hero Section */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 360px;
    display: flex;
    align-items: center;
    text-align: center;
    color: white;
    margin-top: 70px;
}

.hero-content {
    width: 100%;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    background-color: #a4c616;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #8ca813;
}

.load-more-button {
    width: 90%;
    text-align: center;
    align-items: center;
    background-color: #a4c616;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.load-more-button:hover {
    background-color: #8ca813;
}

.message-button {
    width: 90%;
    text-align: center;
    align-items: center;
    background-color: #e5cb00;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

button.annotate {
    background-color: #24ab31;
    color: white;
    border: none;
    margin: 4px 2px 4px 4px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    box-sizing: border-box;
    aspect-ratio: 1;
    height: 100%;
}

button.annotate-update {
    background-color: #2fc7d4;
    color: white;
    border: none;
    margin: 4px 2px 4px 4px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    box-sizing: border-box;
    aspect-ratio: 1;
    height: 100%;
}

div.userbundle {
    display: block;
    width: 100%;
    padding: 10px;
}

button.annotate:hover {
    background-color: #197021;
}

button.annotate-update:hover {
    background-color: #18686f;
}

button.annotate-update:hover:disabled {
    background-color: transparent;
}

button.annotate:disabled, .annotate-update:disabled {
    background-color: transparent;
    color: transparent;
}

textarea.annotate {
    height: 100%;
    box-sizing: border-box; 
    margin: 4px 2px 4px 4px;
    flex: 1;
    resize: none;
    height: 100%;
}

div.annotate {
    width: 100%;
    height: 5em;
    display: flex;
    box-sizing: border-box;
}

/* Features Section */
.features {
    padding: 60px 0;
    background-color: white;
}

.naked-features {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #f0f0f0;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    color: #555;
    font-size: 1.8rem;
}

.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.feature {
    /* Cap each card at one third of the row (minus the two 30px gaps) and
       don't let it grow, so the row holds at most three. Five cards then
       wrap as 3 + 2 (centered) instead of 4 + 1. On narrower viewports the
       250px floor drops the count to two, then one per row. */
    flex: 0 1 calc((100% - 60px) / 3);
    max-width: calc((100% - 60px) / 3);
    min-width: 250px;
    text-align: center;
    padding: 20px;
}

.feature-icon {
    width: 80px;
    height: 80px;
    background-color: #f0f8ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #46c0ed;
    font-size: 2rem;
}

.feature h3 {
    margin-bottom: 15px;
    color: #444;
}

ul {
    padding: 5px;
    margin-left: 25px;
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    padding: 40px 0;
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    list-style: none;
    margin-bottom: 20px;
}

.footer-links li {
    margin: 0 15px;
}

.footer-links a {
    color: white;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

.copyright {
    font-size: 0.9rem;
    color: #aaa;
}

/* Responsive Styles */
@media (max-width: 480px) {
    .header-content {
        flex-direction: column;
        padding: 15px 0;
    }
    
    .logo {
        margin-bottom: 15px;
    }
    
    .nav-links {
        margin-bottom: 15px;
    }
    
    .nav-links li {
        margin: 0 10px;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .features-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .feature {
        max-width: 100%;
    }
    
    .footer-links {
        flex-wrap: wrap;
    }
    
    .footer-links li {
        margin: 5px 10px;
    }
}

/* ===== Signed-out notice banner ============================== */

.session-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: #e5cb00; color: #222; text-align: center;
    padding: 12px 16px; font-weight: bold;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ===== Connection status marker ============================== */

.user-icon { position: relative; }
.conn-marker {
    position: absolute; top: -2px; right: -2px;
    width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid #fff; box-sizing: border-box;
    background: #9e9e9e;
}
.conn-marker.conn-connecting { background: #e5b800; }   /* yellow: establishing */
.conn-marker.conn-open       { background: #2ecc40; }   /* green: connected */
.conn-marker.conn-failed     { background: #e24a3b; }   /* red: attempt failed */

/* ===== My Photos gallery ===================================== */

.gallery-tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 auto 16px auto;
}
.gallery-tabs button {
    background: #efefef;
    color: #333;
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.gallery-tabs button.active {
    background: #a4c616;
    color: #fff;
}

.gallery-empty {
    text-align: center;
    color: #888;
    padding: 40px 0;
}

.grid-sentinel { width: 100%; height: 1px; }

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 4px;
    width: 100%;
}
.photo-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #dfdfdf;
    overflow: hidden;
    cursor: pointer;
}
.photo-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    width: 100%;
}
.card {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #222;
    overflow: hidden;
    cursor: pointer;
    border-radius: 6px;
}
.card-rep {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
}
.card-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 8px 10px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    text-align: left;
}
.card-title { font-size: 1.3rem; font-weight: bold; }
.card-sub { font-size: 0.85rem; opacity: 0.9; }

.subview-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.subview-back {
    background: #efefef; border: none; border-radius: 16px;
    padding: 6px 14px; font-weight: bold; cursor: pointer;
}
.subview-title { font-size: 1.2rem; font-weight: bold; }

/* Rolls */
.roll { border-top: 3px solid #9a9a9a; padding: 10px 0 18px 0; }
.roll-head { font-weight: bold; }
.roll-annotation { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.roll-annotation-input {
    width: 100%; min-height: 60px; box-sizing: border-box;
    border: 1px solid #ccc; border-radius: 6px; padding: 8px; font: inherit;
}
.roll-annotation-save {
    align-self: flex-start; background: #a4c616; color: #fff; border: none;
    border-radius: 4px; padding: 8px 16px; font-weight: bold; cursor: pointer;
}
.roll-tags { margin-top: 8px; color: #333; }

/* ===== Photo detail overlay (buy-page visual standard) ======= */
/* Reuses the buy-* classes for the stage / panel / roll strip; the
   pd-* rules below are overlay-specific overrides. */

.pd-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: #f4f4f4; overflow-y: auto;
}
.pd-main {
    display: flex; gap: 24px; align-items: flex-start;
    max-width: 1280px; margin: 0 auto;
    padding: 64px 24px 0 24px;
}
.pd-stage {
    /* buy-stage with overlay geometry: leave room for the strip below. */
    position: relative;
    height: min(68vh, 760px);
}
.pd-img {
    /* Fill the stage (not max-*: a small icon must UPSCALE to occupy the
       exact area the preview will fill once loaded — the "preview still
       loading" pill explains the soft look, and the swap stays seamless
       because icon and preview share the aspect ratio). */
    width: 100%; height: 100%;
    object-fit: contain;
    -webkit-user-drag: none; user-select: none;
}
.pd-loading {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    background: rgba(0,0,0,0.65); color: #fff;
    padding: 6px 14px; border-radius: 14px; font-size: 0.9rem;
    pointer-events: none;
}
.pd-panel { margin-bottom: 16px; }
.pd-status-note { color: #888; font-size: 0.85rem; margin: -6px 0 14px 0; }
.pd-osm-link { margin: -8px 0 14px 0; font-size: 0.85rem; }
.pd-link { color: #4a7; text-decoration: underline; }
.pd-muted { color: #999; }
.pd-tags { margin: 4px 0 2px 0; font-size: 0.92rem; }
.pd-tag-edit {
    background: none; border: none; cursor: pointer; color: #a4c616;
    font-size: 1.1rem; padding: 0 4px;
}
.pd-actions {
    border-top: 1px solid #eee; margin-top: 14px; padding-top: 14px;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.pd-button {
    background: #a4c616; color: #fff; border: none; border-radius: 6px;
    padding: 9px 14px; font-weight: bold; cursor: pointer; font-size: 0.9rem;
}
.pd-button:hover { background: #8ca813; }
.pd-button.pd-danger { background: #e24a3b; }
.pd-button.pd-danger:hover { background: #c43a2c; }
.pd-button:disabled { opacity: 0.5; cursor: default; }
.pd-roll {
    max-width: 1280px; margin: 20px auto 32px auto; padding: 0 24px;
}
.pd-close, .pd-nav {
    z-index: 902; background: rgba(0,0,0,0.5); color: #fff;
    border: none; cursor: pointer; line-height: 1;
}
.pd-close {
    /* The overlay scrolls; keep the close button pinned to the viewport. */
    position: fixed; top: 12px; right: 14px;
    width: 40px; height: 40px; border-radius: 20px; font-size: 1.6rem;
}
.pd-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 24px; font-size: 2rem;
}
.pd-prev { left: 10px; }
.pd-next { right: 10px; }

/* Owner-facing status badge variants (buy-badge-ok/-warn live with the
   buy-page styles). */
.buy-badge-info { background: #e8f0fe; color: #1a56b8; }
.buy-badge-gray { background: #ececec; color: #555; }
.buy-badge-err  { background: #fdeaea; color: #b32020; }

@media (max-width: 900px) {
    .pd-main { flex-direction: column; padding-top: 56px; }
    .pd-stage { width: 100%; flex: none; height: 50vh; }
    .pd-panel { width: 100%; flex: none; }
}

/* ===== Tag editor overlay ==================================== */

.tag-editor {
    position: fixed; inset: 0; z-index: 950;
    background: #fff; display: flex; flex-direction: column;
}
.tag-editor-header {
    display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #eee;
}
.tag-editor-close { background: none; border: none; font-size: 1.8rem; cursor: pointer; line-height: 1; color: #333; }
.tag-editor-title { flex: 1; text-align: center; font-size: 1.2rem; font-weight: bold; margin-right: 30px; }
.tag-chips {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
}
.tag-chip {
    background: #f1f1f1; color: #222; border: 1px solid #ddd;
    border-radius: 20px; padding: 7px 14px; cursor: pointer; font-weight: 500;
}
.tag-chip.selected { background: #a4c616; color: #fff; border-color: #a4c616; }
.tag-editor-footer { padding: 12px 16px; border-top: 1px solid #eee; }
.tag-done-button {
    width: 100%; background: #a4c616; color: #fff; border: none;
    border-radius: 8px; padding: 12px; font-size: 1.05rem; font-weight: bold; cursor: pointer;
}
.tag-done-button:disabled { opacity: 0.6; cursor: default; }

/* ===== Buy page ============================================== */

.buy-page {
    max-width: 1280px;
    margin: 96px auto 32px auto;        /* clears the fixed header */
    padding: 0 24px;                    /* air on both sides, incl. the left */
}
.buy-main {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.buy-stage {
    /* Fixed, viewport-driven geometry: the photo never changes the layout. */
    flex: 1 1 60%;
    height: min(72vh, 760px);
    background: #d8d8d8;
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
}
.buy-photo-img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    -webkit-user-drag: none; user-select: none;
}
.buy-stage-note { color: #777; font-size: 1rem; }

.buy-panel {
    flex: 0 0 360px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.12);
    padding: 20px;
    box-sizing: border-box;
    min-height: 300px;
}
.buy-code { margin: 0 0 10px 0; font-size: 1.7rem; letter-spacing: 1px; }
.buy-badge { border-radius: 8px; padding: 8px 12px; font-size: 0.9rem; font-weight: 600; margin-bottom: 14px; }
.buy-badge-ok { background: #e6f6e6; color: #1c7c1c; }
.buy-badge-warn { background: #fdf3e0; color: #8a5a00; }
.buy-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.buy-row { display: flex; gap: 10px; font-size: 0.92rem; }
.buy-row-label { flex: 0 0 96px; color: #777; }
.buy-row-value { flex: 1; color: #222; }

.buy-map {
    position: relative; width: 100%; aspect-ratio: 4 / 3;
    border-radius: 8px; overflow: hidden; margin-bottom: 14px; background: #eee;
}
.buy-map-iframe { width: 100%; height: 100%; border: 0; display: block; }
.buy-map-blob {
    /* Uncertainty blob for arc-minute-rounded locations; width set in JS
       from the bbox span so the size honestly reflects the precision. */
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    aspect-ratio: 1; border-radius: 50%;
    background: rgba(10,132,255,0.22); border: 2px solid rgba(10,132,255,0.55);
    pointer-events: none;
}

.buy-licenses { border-top: 1px solid #eee; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.buy-license-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.buy-license-label { font-weight: 600; font-size: 0.95rem; }
.buy-license-price { color: #999; font-weight: 400; margin-left: 6px; }
.buy-license-note { color: #888; font-size: 0.85rem; }
.buy-add-button {
    background: #a4c616; color: #fff; border: none; border-radius: 6px;
    padding: 9px 14px; font-weight: bold; cursor: pointer; font-size: 0.9rem;
}
.buy-add-button:hover { background: #8ca813; }
.buy-add-button.in-cart { background: #64748b; }

.buy-roll-section { margin-top: 28px; }
.buy-roll-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.buy-roll-title { margin: 0; font-size: 1.15rem; }
.buy-roll-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.buy-roll-strip img { cursor: pointer; }
.buy-roll-current { outline: 3px solid #a4c616; outline-offset: -3px; }

.buy-gone { display: flex; justify-content: center; padding: 60px 0; }
.buy-gone-card {
    background: #fff; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.12);
    padding: 36px 44px; text-align: center; font-size: 1.05rem; color: #444;
}

@media (max-width: 900px) {
    .buy-main { flex-direction: column; }
    .buy-stage { width: 100%; flex: none; height: 52vh; }
    .buy-panel { width: 100%; flex: none; }
}

/* The global body min-width (480px) would force horizontal overflow on
   portrait phones (~390px CSS width); the buy page is built to fit the
   viewport width exactly. */
body.buy-body { min-width: 0; }

/* Portrait phones: full-bleed — the stage spans exactly the screen width. */
@media (max-width: 600px) {
    .buy-page { padding: 0; margin: 84px 0 24px 0; }
    .buy-main { gap: 12px; }
    .buy-stage { border-radius: 0; box-shadow: none; }
    .buy-panel { border-radius: 0; box-shadow: none; }
    .buy-roll-head { padding: 0 12px; }
    .buy-gone { padding: 40px 12px; }
}
@media (max-width: 480px) {
    .buy-page { margin-top: 140px; }   /* the header stacks vertically here */
}

/* ===== Cart (header icon + drawer) =========================== */

.cart-button {
    position: relative;
    background: none; border: none; cursor: pointer;
    color: #46c0ed;                 /* header is white — match the user-icon blue */
    padding: 6px; line-height: 1;
}
.cart-button:hover { color: #3aa8d2; }
.cart-badge {
    position: absolute; top: -2px; right: -4px;
    background: #e24a3b; color: #fff; border-radius: 9px;
    min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
    font-size: 11px; font-weight: bold; line-height: 18px; text-align: center;
}
.cart-overlay { position: fixed; inset: 0; z-index: 980; background: rgba(0,0,0,0.45); }
.cart-panel {
    position: absolute; top: 0; right: 0; height: 100%; width: 380px; max-width: 100vw;
    background: #fff; box-shadow: -4px 0 18px rgba(0,0,0,0.25);
    display: flex; flex-direction: column;
}
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eee; }
.cart-title { font-weight: bold; font-size: 1.1rem; color: #333; }
.cart-close { background: none; border: none; font-size: 1.7rem; cursor: pointer; color: #333; line-height: 1; }
.cart-list { flex: 1; overflow-y: auto; padding: 10px 16px; }
.cart-empty { color: #888; text-align: center; padding: 40px 0; }
.cart-item { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f1f1f1; }
.cart-item-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #e8e8e8; flex: none; }
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-title { font-weight: 600; font-size: 0.92rem; color: #222; }
.cart-item-license { color: #555; font-size: 0.82rem; }
.cart-item-price { color: #999; font-size: 0.8rem; }
.cart-item-remove { background: none; border: none; color: #b33; font-size: 1.3rem; cursor: pointer; line-height: 1; }
.cart-foot { border-top: 1px solid #eee; padding: 14px 16px; }
.cart-note { color: #777; font-size: 0.85rem; margin-bottom: 10px; }
.cart-checkout {
    width: 100%; background: #a4c616; color: #fff; border: none; border-radius: 8px;
    padding: 12px; font-size: 1rem; font-weight: bold; cursor: pointer;
}
.cart-checkout:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 480px) {
    .cart-panel { width: 100vw; }
}

/* ===== App Store badge (front-page Install App) ============= */
/* Placeholder link until the app is published; aria-disabled + the
   onclick guard keep it inert without changing the visual style. */
.app-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 9px 18px;
    background: #000;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    line-height: 1.1;
}
.app-store-badge:hover { background: #222; }
.app-store-badge[aria-disabled="true"] { opacity: 0.85; cursor: default; }
.app-store-badge-text { display: flex; flex-direction: column; text-align: left; }
.app-store-badge-text small { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; }
.app-store-badge-text strong { font-size: 1.15rem; font-weight: 600; }

/* ===== Static content pages (FAQ, Privacy, Terms) =========== */
/* Shared layout for the self-contained /faq, /privacy and /terms
   directory pages. The fixed header is ~70px tall, so clear it. */
.doc-page {
    max-width: 900px;
    margin: 110px auto 60px auto;
    padding: 0 20px;
}
.doc-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 32px 36px;
}
.doc-title { color: #444; font-size: 2rem; margin-bottom: 6px; }
.doc-subtitle { color: #888; margin-bottom: 28px; }
.doc-card h2 { color: #46c0ed; font-size: 1.4rem; margin: 30px 0 12px; }
.doc-card h3 { color: #555; font-size: 1.1rem; margin: 22px 0 8px; }
.doc-card p { margin-bottom: 14px; }
.doc-card address { font-style: normal; margin-bottom: 14px; }
.doc-card ul { margin: 0 0 14px 25px; }
.doc-card li { margin-bottom: 6px; }
.doc-updated { color: #aaa; font-size: 0.85rem; margin-top: 32px; border-top: 1px solid #eee; padding-top: 16px; }

/* FAQ — native <details> accordion, intra-page category nav. */
.faq-nav {
    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.faq-nav a {
    background: #efefef; color: #333; text-decoration: none;
    padding: 8px 18px; border-radius: 20px; font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}
.faq-nav a:hover { background: #a4c616; color: #fff; }
.faq-cat-title {
    color: #444; font-size: 1.5rem; margin: 36px 0 8px;
    padding-bottom: 8px; border-bottom: 2px solid #a4c616;
}
.faq-item { border-bottom: 1px solid #eee; }
.faq-item summary {
    cursor: pointer; padding: 16px 28px 16px 4px; font-weight: bold;
    color: #333; font-size: 1.05rem; list-style: none; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; position: absolute; right: 6px; top: 14px;
    color: #46c0ed; font-size: 1.4rem; font-weight: bold; line-height: 1;
}
.faq-item[open] summary::after { content: '\2013'; }
.faq-item summary:hover { color: #46c0ed; }
.faq-answer { padding: 0 4px 18px; color: #555; }
.faq-answer p { margin-bottom: 10px; }
.faq-answer ul { margin: 0 0 10px 25px; }