/* ══════════════════════════════════════════════════════════════
   Japan Maxing — Community Platform Styles
   ══════════════════════════════════════════════════════════════ */

/* ── Auth Bar ─────────────────────────────── */
.jm-auth-bar {
    position: absolute;
    top: 1.1rem;
    right: 1rem;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jm-auth-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e8e8f0;
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.jm-auth-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: var(--accent, #e6a817);
}

.jm-auth-btn.premium-cta {
    background: linear-gradient(135deg, #e6a817, #f1c40f);
    border: none;
    color: #000;
    font-weight: 700;
}

.jm-auth-btn.premium-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(230,168,23,0.4);
}

.jm-user-menu {
    position: relative;
}

.jm-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: border-color 0.3s;
    object-fit: cover;
}

.jm-user-avatar:hover {
    border-color: var(--accent, #e6a817);
}

.jm-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1a1a28;
    border: 1px solid #2a2a3d;
    border-radius: 12px;
    min-width: 220px;
    padding: 0.5rem 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    display: none;
    z-index: 1010;
}

.jm-user-dropdown.open { display: block; }

.jm-dropdown-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #2a2a3d;
}

.jm-dropdown-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #e8e8f0;
}

.jm-dropdown-tier {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 2px;
}

.jm-dropdown-tier.free { color: #8888a0; }
.jm-dropdown-tier.premium { color: #e6a817; }

.jm-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.6rem 1rem;
    color: #e8e8f0;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    background: none;
    width: 100%;
    font-family: inherit;
    text-align: left;
}

.jm-dropdown-item:hover { background: rgba(255,255,255,0.05); }
.jm-dropdown-item.danger { color: #e74c3c; }

.jm-premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #e6a817, #f1c40f);
    color: #000;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── Auth Modal ────────────────────────────── */
.jm-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.jm-modal-overlay.open { display: flex; }

.jm-modal {
    background: #12121a;
    border: 1px solid #2a2a3d;
    border-radius: 20px;
    max-width: 440px;
    width: 90%;
    padding: 2.5rem;
    position: relative;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    animation: jmModalIn 0.3s ease;
}

@keyframes jmModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.jm-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #8888a0;
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.jm-modal-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.jm-modal h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
    background: linear-gradient(135deg, #e6a817, #f1c40f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.jm-modal p.subtitle {
    color: #8888a0;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.jm-google-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #2a2a3d;
    background: #1a1a28;
    color: #e8e8f0;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    transition: all 0.3s;
}

.jm-google-btn:hover {
    background: #222235;
    border-color: rgba(255,255,255,0.2);
}

.jm-google-btn svg { width: 20px; height: 20px; }

.jm-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.2rem 0;
    color: #8888a0;
    font-size: 0.8rem;
}

.jm-divider::before, .jm-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #2a2a3d;
}

.jm-form-group {
    margin-bottom: 0.8rem;
}

.jm-form-group input {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid #2a2a3d;
    background: #0a0a0f;
    color: #e8e8f0;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s;
}

.jm-form-group input:focus { border-color: #e6a817; }
.jm-form-group input::placeholder { color: #555; }

.jm-submit-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #e6a817, #f1c40f);
    color: #000;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin-top: 0.5rem;
    transition: all 0.3s;
}

.jm-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(230,168,23,0.4);
}

.jm-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.jm-toggle-auth {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #8888a0;
}

.jm-toggle-auth a {
    color: #e6a817;
    cursor: pointer;
    text-decoration: none;
}

.jm-toggle-auth a:hover { text-decoration: underline; }

.jm-auth-error {
    background: rgba(231,76,60,0.1);
    border: 1px solid rgba(231,76,60,0.3);
    color: #e74c3c;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 0.8rem;
    display: none;
}

.jm-auth-error.visible { display: block; }

/* ── Paywall Modal ─────────────────────────── */
.jm-paywall-modal {
    max-width: 500px;
}

.jm-paywall-modal h2 {
    font-size: 1.8rem;
}

.jm-paywall-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.jm-paywall-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: #e8e8f0;
}

.jm-paywall-features li .check {
    color: #2ecc71;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.jm-paywall-features li .lock {
    color: #e74c3c;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.jm-pricing-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.jm-pricing-card {
    background: #1a1a28;
    border: 2px solid #2a2a3d;
    border-radius: 14px;
    padding: 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.jm-pricing-card:hover, .jm-pricing-card.selected {
    border-color: #e6a817;
    background: rgba(230,168,23,0.05);
}

.jm-pricing-card .period { font-size: 0.8rem; color: #8888a0; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.jm-pricing-card .price { font-size: 1.8rem; font-weight: 900; color: #e8e8f0; margin: 0.3rem 0; }
.jm-pricing-card .price span { font-size: 0.85rem; font-weight: 400; color: #8888a0; }
.jm-pricing-card .save-badge { font-size: 0.7rem; color: #2ecc71; font-weight: 700; }

/* ── Comment Section ───────────────────────── */
.jm-comments-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0.6rem;
    padding: 0.3rem 0;
    font-size: 0.8rem;
    color: #8888a0;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    transition: color 0.2s;
}

.jm-comments-toggle:hover { color: #e6a817; }

.jm-comments-badge {
    background: rgba(230,168,23,0.15);
    color: #e6a817;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
}

.jm-star-display {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
}

.jm-star-display .star { color: #e6a817; font-size: 0.7rem; }
.jm-star-display .star.empty { color: #333; }
.jm-star-display .avg { font-size: 0.7rem; color: #8888a0; margin-left: 3px; }

/* ── Comment Modal Overlay ──────────────── */
.jm-comment-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    transition: background 0.25s ease, backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease;
}

.jm-comment-overlay.open {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.jm-comment-modal {
    background: #14141f;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    width: 100%;
    max-width: 580px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.jm-comment-overlay.open .jm-comment-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.jm-comment-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.jm-comment-modal-header h3 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.jm-comment-modal-header .jm-modal-close {
    position: static;
    background: none;
    border: none;
    color: #888;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.jm-comment-modal-header .jm-modal-close:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.jm-comment-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.2rem;
}

.jm-comments-sort {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.jm-sort-btn {
    font-size: 0.7rem;
    color: #8888a0;
    background: none;
    border: 1px solid transparent;
    padding: 3px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.jm-sort-btn:hover { color: #e8e8f0; }

.jm-sort-btn.active {
    color: #e6a817;
    border-color: rgba(230,168,23,0.3);
    background: rgba(230,168,23,0.08);
}

.jm-comment {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.jm-comment:last-child { border-bottom: none; }

.jm-comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.4rem;
}

.jm-comment-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.jm-comment-user {
    font-weight: 600;
    font-size: 0.82rem;
    color: #e8e8f0;
}

.jm-comment-time {
    font-size: 0.7rem;
    color: #555;
}

.jm-comment-stars {
    display: flex;
    gap: 1px;
    margin-left: auto;
}

.jm-comment-stars .star { font-size: 0.65rem; color: #e6a817; }
.jm-comment-stars .star.empty { color: #333; }

.jm-comment-body {
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.5;
    margin-bottom: 0.4rem;
}

.jm-comment-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.jm-vote-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #555;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.2s;
}

.jm-vote-btn:hover { color: #e8e8f0; background: rgba(255,255,255,0.05); }
.jm-vote-btn.upvoted { color: #2ecc71; }
.jm-vote-btn.downvoted { color: #e74c3c; }
.jm-delete-btn { color: #884444; margin-left: auto; }
.jm-delete-btn:hover { color: #e74c3c !important; background: rgba(231,76,60,0.1) !important; }

.jm-comment-compose {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid #2a2a3d;
}

.jm-comment-compose textarea {
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #2a2a3d;
    background: #0a0a0f;
    color: #e8e8f0;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.3s;
}

.jm-comment-compose textarea:focus { border-color: #e6a817; }
.jm-comment-compose textarea::placeholder { color: #555; }

.jm-compose-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.jm-star-input {
    display: flex;
    gap: 3px;
}

.jm-star-input .star {
    font-size: 1.1rem;
    color: #333;
    cursor: pointer;
    transition: color 0.15s;
}

.jm-star-input .star.active, .jm-star-input .star:hover { color: #e6a817; }

.jm-post-btn {
    padding: 6px 18px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #e6a817, #f1c40f);
    color: #000;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.jm-post-btn:hover { transform: translateY(-1px); }
.jm-post-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.jm-login-to-comment {
    text-align: center;
    padding: 1rem;
    color: #8888a0;
    font-size: 0.85rem;
}

.jm-login-to-comment a {
    color: #e6a817;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}

.jm-upgrade-to-comment {
    text-align: center;
    padding: 1.2rem;
    background: rgba(230,168,23,0.05);
    border: 1px dashed rgba(230,168,23,0.3);
    border-radius: 10px;
    margin-top: 0.5rem;
}

.jm-upgrade-to-comment p {
    color: #e8e8f0 !important;
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem;
}

.jm-no-comments {
    text-align: center;
    padding: 1rem;
    color: #555;
    font-size: 0.82rem;
}

/* ── Guide Review Section ──────────────────── */
.jm-guide-reviews {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}

.jm-reviews-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.jm-reviews-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #e8e8f0;
}

.jm-rating-summary {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #1a1a28;
    border: 1px solid #2a2a3d;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.jm-rating-big {
    text-align: center;
    min-width: 80px;
}

.jm-rating-big .num { font-size: 3rem; font-weight: 900; color: #e6a817; }
.jm-rating-big .count { font-size: 0.8rem; color: #8888a0; }

.jm-rating-bars {
    flex: 1;
}

.jm-rating-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.jm-rating-bar-row .label { font-size: 0.75rem; color: #8888a0; width: 10px; text-align: right; }

.jm-rating-bar-row .bar {
    flex: 1;
    height: 6px;
    background: #2a2a3d;
    border-radius: 3px;
    overflow: hidden;
}

.jm-rating-bar-row .bar .fill {
    height: 100%;
    background: #e6a817;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.jm-rating-bar-row .pct { font-size: 0.7rem; color: #555; width: 30px; }

/* ── Toast Notifications ───────────────────── */
.jm-toast-container {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.jm-toast {
    background: #1a1a28;
    border: 1px solid #2a2a3d;
    color: #e8e8f0;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: jmToastIn 0.3s ease, jmToastOut 0.3s ease 2.7s forwards;
    pointer-events: auto;
}

.jm-toast.success { border-color: rgba(46,204,113,0.4); }
.jm-toast.error { border-color: rgba(231,76,60,0.4); }

@keyframes jmToastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jmToastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

/* ── Guide Reviews Section ─────────────── */
.jm-reviews-section {
    max-width: 800px;
    margin: 3rem auto;
    padding: 0 1.5rem 3rem;
}

.jm-reviews-header {
    margin-bottom: 1.5rem;
}

.jm-reviews-header h2 {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.jm-reviews-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jm-reviews-avg {
    font-size: 1.8rem;
    font-weight: 700;
    color: #e6a817;
}

.jm-reviews-stars .star { color: #e6a817; font-size: 1rem; }
.jm-reviews-stars .star.empty { color: #333; }

.jm-reviews-count {
    color: #888;
    font-size: 0.9rem;
}

.jm-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.jm-review-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 1.2rem;
    transition: border-color 0.2s;
}

.jm-review-card:hover {
    border-color: rgba(255,255,255,0.12);
}

.jm-review-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.jm-review-rating .star { color: #e6a817; font-size: 0.85rem; }
.jm-review-rating .star.empty { color: #333; }

.jm-review-title {
    color: #e8e8f0;
    font-size: 1rem;
    font-weight: 600;
    margin: 0.3rem 0;
}

.jm-review-body {
    color: #b0b0c0;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0.4rem 0 0.6rem;
    white-space: pre-wrap;
}

/* ── Review Compose Form ──────────────── */
.jm-review-compose {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 1.5rem;
}

.jm-review-compose-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.jm-review-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #e8e8f0;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
    outline: none;
    box-sizing: border-box;
}

.jm-review-input:focus { border-color: rgba(230,168,23,0.4); }

.jm-review-textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #e8e8f0;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 80px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

.jm-review-textarea:focus { border-color: rgba(230,168,23,0.4); }

.jm-review-compose-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.8rem;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 768px) {
    .jm-modal { padding: 1.5rem; margin: 1rem; }
    .jm-pricing-cards { grid-template-columns: 1fr; }
    .jm-rating-summary { flex-direction: column; text-align: center; }
    .jm-auth-bar { top: auto; bottom: 5rem; right: 0.5rem; }
    .jm-reviews-section { padding: 0 1rem 2rem; }
    .jm-comment-modal { max-width: 100%; max-height: 90vh; }
    .jm-budget-modal { max-width: 100%; }
    .jm-budget-config { flex-wrap: wrap; }
    .jm-budget-item { grid-template-columns: 1fr 80px 22px; }
    .jm-budget-item-detail { display: none; }
    .jm-budget-btn { bottom: 1rem; left: 1rem; }
}

/* ── Budget Calculator ───────────────────── */
.jm-budget-btn {
    position: fixed;
    bottom: 6rem;
    left: 1.5rem;
    z-index: 9999;
    background: linear-gradient(135deg, #e6a817, #d4941a);
    color: #000;
    border: none;
    padding: 0.7rem 1.4rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(230,168,23,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.jm-budget-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(230,168,23,0.4);
}

.jm-budget-modal {
    max-width: 700px !important;
    max-height: 85vh !important;
}

.jm-budget-content { padding: 0 !important; }

.jm-budget-config {
    display: flex;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.jm-budget-field {
    flex: 1;
    min-width: 0;
}

.jm-budget-field label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin-bottom: 0.3rem;
}

.jm-budget-field input,
.jm-budget-field select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #e8e8f0;
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
}

.jm-budget-field input:focus,
.jm-budget-field select:focus {
    border-color: rgba(230,168,23,0.4);
}

.jm-budget-field select {
    color: #fff;
}

.jm-budget-field select option {
    background: #1a1a2e;
    color: #fff;
}

.jm-budget-breakdown {
    padding: 0.8rem 1.2rem;
    overflow-y: auto;
}

.jm-budget-section {
    margin-bottom: 1rem;
}

.jm-budget-section-title {
    display: grid;
    grid-template-columns: 1fr 90px 22px;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #b0b0c0;
    margin: 0 0 0.5rem 0;
    padding: 0 0.5rem 0.3rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.jm-budget-section-total {
    color: #e6a817;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.jm-budget-items {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.jm-budget-item {
    display: grid;
    grid-template-columns: 1fr auto 90px 22px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.82rem;
}

.jm-budget-item:hover { background: rgba(255,255,255,0.03); }

.jm-budget-item-name {
    color: #d0d0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jm-budget-item-detail {
    color: #555;
    font-size: 0.72rem;
    white-space: nowrap;
}

.jm-budget-item-cost {
    color: #e8e8f0;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    grid-column: 3;
}

.jm-budget-empty {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-size: 0.85rem;
}

/* ── City Headers & Remove Buttons (cross-city budget) ── */
.jm-city-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    margin-top: 0.8rem;
    background: linear-gradient(135deg, rgba(230,168,23,0.12), rgba(230,168,23,0.04));
    border: 1px solid rgba(230,168,23,0.15);
    border-radius: 8px;
}

.jm-city-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: #e6a817;
    flex: 1;
}

.jm-city-count {
    font-weight: 400;
    font-size: 0.75rem;
    color: #888;
    margin-left: 0.3rem;
}

.jm-city-total {
    font-weight: 600;
    font-size: 0.88rem;
    color: #e8e8f0;
}

.jm-remove-city,
.jm-remove-item {
    background: none;
    border: 1px solid rgba(255,80,80,0.25);
    color: #ff5050;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.7rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.jm-city-header:hover .jm-remove-city,
.jm-budget-item:hover .jm-remove-item {
    opacity: 1;
}

.jm-remove-item {
    grid-column: 4;
}

.jm-remove-city:hover,
.jm-remove-item:hover {
    background: rgba(255,80,80,0.15);
    border-color: rgba(255,80,80,0.5);
}

.jm-city-indent {
    margin-left: 0.5rem;
    border-left: 2px solid rgba(230,168,23,0.1);
    padding-left: 0.5rem;
}

/* ── Budget Total ──────────────────────── */
.jm-budget-total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid rgba(230,168,23,0.3);
    text-align: center;
}

.jm-budget-total-row {
    padding: 0.15rem 0;
}

.jm-budget-total-row.main {
    font-size: 0.85rem;
    font-weight: 500;
    color: #999;
    margin-bottom: 0.15rem;
}

.jm-budget-total-row.main span:last-child {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #e6a817;
    margin-top: 0.1rem;
    letter-spacing: -0.5px;
}

.jm-budget-total-row.sub {
    font-size: 0.82rem;
    color: #888;
}

.jm-budget-total-row.sub span:last-child {
    margin-left: 0.4rem;
    color: #b0b0c0;
    font-weight: 600;
}

/* ── Community Price Badge ─────────────── */
.jm-community-price {
    font-size: 0.75rem;
    color: #2ecc71;
    padding: 0.3rem 0;
    font-weight: 600;
}

.jm-cp-count {
    color: #666;
    font-weight: 400;
}

.jm-cp-badge {
    display: inline-block;
    background: rgba(46,204,113,0.15);
    color: #2ecc71;
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 4px;
}

.jm-badge-listed { background: rgba(52,152,219,0.15); color: #3498db; }
.jm-badge-tag { background: rgba(26,188,156,0.15); color: #1abc9c; }
.jm-badge-est { background: rgba(230,168,23,0.15); color: #e6a817; }

/* ── Price Report Form ──────────────────── */
.jm-price-report-divider {
    text-align: center;
    color: #444;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 1.2rem 0 0.8rem;
    position: relative;
}

.jm-price-report-divider::before,
.jm-price-report-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: rgba(255,255,255,0.06);
}

.jm-price-report-divider::before { left: 0; }
.jm-price-report-divider::after { right: 0; }

.jm-price-report {
    padding: 0.8rem 0 0;
}

.jm-price-report-desc {
    color: #888;
    font-size: 0.8rem;
    margin: 0 0 0.8rem 0;
}

.jm-price-report-row {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.jm-price-input,
.jm-price-month {
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #e8e8f0;
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
}

.jm-price-input:focus,
.jm-price-month:focus { border-color: rgba(230,168,23,0.4); }

.jm-price-submit {
    margin-top: 0.5rem;
    width: 100%;
}

.jm-price-report-thanks {
    text-align: center;
    color: #2ecc71;
    font-size: 0.85rem;
    padding: 1rem 0;
}

/* ── Live / Static Rates Badge ────────── */
.jm-live-badge {
    font-size: 0.6rem;
    color: #2ecc71;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}

.jm-static-badge {
    font-size: 0.6rem;
    color: #666;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}

.jm-badge-curated {
    background: rgba(46,204,113,0.15) !important;
    color: #2ecc71 !important;
}

/* ── Recommended Days Suggestion ──────── */
.jm-rec-days {
    background: rgba(108,92,231,0.1);
    border-left: 3px solid #6c5ce7;
    padding: 10px 14px;
    font-size: 0.78rem;
    color: #aaa;
    border-radius: 0 8px 8px 0;
    margin-bottom: 12px;
    line-height: 1.5;
}
.jm-rec-days strong {
    color: #a29bfe;
}
.jm-rec-use {
    color: #6c5ce7;
    font-weight: 600;
    text-decoration: none;
    margin-left: 6px;
    cursor: pointer;
    transition: color 0.2s;
}
.jm-rec-use:hover {
    color: #a29bfe;
    text-decoration: underline;
}

/* ── Seasonal Alert ───────────────────── */
.jm-season-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.8rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border-left: 3px solid #666;
    font-size: 0.8rem;
}

.jm-season-tag {
    font-weight: 700;
    white-space: nowrap;
    color: #b0b0c0;
}

.jm-season-tag.warn { color: #e6a817; border-left-color: #e6a817; }
.jm-season-tag.good { color: #2ecc71; border-left-color: #2ecc71; }
.jm-season-alert:has(.warn) { border-left-color: #e6a817; background: rgba(230,168,23,0.05); }
.jm-season-alert:has(.good) { border-left-color: #2ecc71; background: rgba(46,204,113,0.05); }

.jm-season-tip {
    color: #888;
    font-size: 0.75rem;
}

/* ── Donut Chart ──────────────────────── */
.jm-donut-wrapper {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.5rem 0;
}

.jm-donut-svg {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.jm-donut-seg {
    animation: donutDraw 0.8s ease-out forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}

@keyframes donutDraw {
    from { opacity: 0; stroke-dasharray: 0 999; }
    to { opacity: 1; }
}

.jm-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.jm-donut-legend-item {
    font-size: 0.72rem;
    color: #b0b0c0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jm-donut-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.jm-donut-pct {
    color: #666;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* ── Tip Boxes (JR Pass / Savings) ───── */
.jm-budget-tip-box {
    margin: 0.8rem 0;
    padding: 0.8rem 1rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border-left: 3px solid #3498db;
}

.jm-budget-tip-box.jm-jr-pass {
    border-left-color: #2ecc71;
    background: rgba(46,204,113,0.04);
}

.jm-tip-header {
    font-weight: 700;
    font-size: 0.85rem;
    color: #e8e8f0;
    margin-bottom: 0.4rem;
}

.jm-budget-tip-box p {
    font-size: 0.8rem;
    color: #b0b0c0;
    margin: 0;
    line-height: 1.5;
}

.jm-savings {
    color: #2ecc71 !important;
}

.jm-tip-item {
    font-size: 0.78rem;
    color: #999;
    padding: 0.25rem 0;
    line-height: 1.4;
}

/* ── Animated Total ───────────────────── */
.jm-animated-total {
    transition: color 0.3s;
}

.jm-budget-item-desc {
    font-size: 0.65rem;
    color: #666;
    font-weight: 400;
    margin-left: 4px;
    font-style: italic;
}

.jm-daily-edit {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #4ecdc4;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    width: 70px;
    padding: 2px 6px;
    border-radius: 4px;
    text-align: right;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    -moz-appearance: textfield;
}
.jm-daily-edit::-webkit-inner-spin-button,
.jm-daily-edit::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.jm-daily-edit:focus {
    border-color: #4ecdc4;
    background: rgba(78,205,196,0.08);
}
.jm-daily-edit:hover {
    border-color: rgba(255,255,255,0.2);
}

.jm-reset-daily {
    font-size: 0.65rem;
    color: #888;
    text-decoration: none;
    font-weight: 400;
    margin-left: 8px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
}
.jm-reset-daily:hover {
    opacity: 1;
    color: #e74c3c;
}

.jm-budget-total-row.main .jm-animated-total {
    font-variant-numeric: tabular-nums;
}

/* ── Wider modal for 5 config fields ──── */
.jm-budget-modal {
    max-width: 750px !important;
}

/* ═════════════════════════════════════════════════════════
   PROFILE PANEL
   ═════════════════════════════════════════════════════════ */

.jm-profile-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    z-index: 100001;
    background: rgba(18, 18, 30, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255,255,255,0.08);
    box-shadow: -8px 0 30px rgba(0,0,0,0.5);
    overflow-y: auto;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.jm-profile-panel.open {
    right: 0;
}

.jm-profile-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #888;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 2;
    padding: 0.25rem;
    transition: color 0.2s;
}
.jm-profile-close:hover { color: #fff; }

/* ── Profile Header ──── */
.jm-profile-header {
    text-align: center;
    padding: 2.5rem 1.5rem 1.5rem;
    background: linear-gradient(135deg, rgba(230,168,23,0.08), rgba(100,60,200,0.08));
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.jm-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(230,168,23,0.4);
    margin-bottom: 0.8rem;
}

.jm-profile-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.2rem 0;
}

.jm-profile-email {
    color: #888;
    font-size: 0.8rem;
    margin: 0 0 0.6rem 0;
}

.jm-profile-tier {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.jm-profile-tier.free {
    background: rgba(255,255,255,0.08);
    color: #888;
}
.jm-profile-tier.premium {
    background: linear-gradient(135deg, rgba(230,168,23,0.3), rgba(255,200,50,0.2));
    color: #e6a817;
    border: 1px solid rgba(230,168,23,0.3);
}

.jm-profile-since {
    color: #666;
    font-size: 0.7rem;
    margin: 0.6rem 0 0 0;
}

/* ── Stats Row ──── */
.jm-profile-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.jm-stat {
    text-align: center;
}

.jm-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e6a817;
    font-variant-numeric: tabular-nums;
}

.jm-stat-label {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.1rem;
}

/* ── Profile Section ──── */
.jm-profile-section {
    padding: 1rem 1.2rem;
    flex: 1;
}

.jm-profile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.jm-profile-section-header h4 {
    color: #ccc;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.jm-profile-save-btn {
    background: rgba(230,168,23,0.15);
    color: #e6a817;
    border: 1px solid rgba(230,168,23,0.3);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}
.jm-profile-save-btn:hover {
    background: rgba(230,168,23,0.25);
}

/* ── Itinerary List ──── */
.jm-itin-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.jm-itin-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #888;
}
.jm-itin-empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.jm-itin-empty p { margin: 0.3rem 0; }
.jm-itin-empty-sub { font-size: 0.75rem; color: #666; }

.jm-itin-loading {
    text-align: center;
    padding: 2rem;
    color: #888;
}

.jm-itin-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0.8rem;
    transition: border-color 0.2s, background 0.2s;
}
.jm-itin-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(230,168,23,0.2);
}

.jm-itin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.jm-itin-name-edit {
    background: none;
    border: 1px solid transparent;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    width: 60%;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
}
.jm-itin-name-edit:hover {
    border-color: rgba(255,255,255,0.15);
}
.jm-itin-name-edit:focus {
    background: rgba(255,255,255,0.06);
    border-color: rgba(230,168,23,0.4);
}

.jm-itin-date {
    color: #666;
    font-size: 0.7rem;
    white-space: nowrap;
}

.jm-itin-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 0.5rem;
}

.jm-itin-share-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
}
.jm-itin-share-link input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #4fc3f7;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.jm-itin-actions {
    display: flex;
    gap: 0.4rem;
}

.jm-itin-action {
    flex: 1;
    padding: 0.35rem 0;
    border-radius: 6px;
    font-size: 0.7rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.jm-itin-action:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
}
.jm-itin-action.load:hover {
    background: rgba(76,175,80,0.15);
    border-color: rgba(76,175,80,0.3);
    color: #4CAF50;
}
.jm-itin-action.share:hover {
    background: rgba(79,195,247,0.15);
    border-color: rgba(79,195,247,0.3);
    color: #4fc3f7;
}
.jm-itin-action.delete {
    flex: 0;
    min-width: 36px;
}
.jm-itin-action.delete:hover {
    background: rgba(255,80,80,0.15);
    border-color: rgba(255,80,80,0.3);
    color: #ff5050;
}

/* ── Upgrade CTA in Profile ──── */
.jm-profile-upgrade {
    padding: 1.2rem;
    margin: 0.5rem 1rem 1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(230,168,23,0.1), rgba(100,60,200,0.1));
    border: 1px solid rgba(230,168,23,0.2);
    text-align: center;
}
.jm-profile-upgrade p {
    color: #ccc;
    font-size: 0.8rem;
    margin: 0 0 0.8rem 0;
}

/* ═════════════════════════════════════════════════════════
   SAVE TRIP MODAL
   ═════════════════════════════════════════════════════════ */

.jm-save-itin-modal {
    max-width: 400px !important;
    text-align: center;
}
.jm-save-itin-modal h2 {
    margin: 0 0 0.3rem 0;
}
.jm-save-itin-info {
    color: #888;
    font-size: 0.85rem;
    margin: 0 0 1rem 0;
}
.jm-save-itin-name {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    outline: none;
    margin-bottom: 1rem;
    box-sizing: border-box;
    text-align: center;
}
.jm-save-itin-name:focus {
    border-color: rgba(230,168,23,0.5);
}

/* ═════════════════════════════════════════════════════════
   SHARED TRIP BANNER
   ═════════════════════════════════════════════════════════ */

.jm-shared-trip-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100002;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, rgba(18,18,35,0.95), rgba(30,25,60,0.95));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(230,168,23,0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.jm-shared-trip-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    color: #fff;
}
.jm-shared-trip-info strong { font-size: 0.9rem; }
.jm-shared-trip-info span { font-size: 0.75rem; color: #aaa; }

.jm-shared-trip-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.jm-shared-load {
    padding: 0.4rem 1rem;
    background: linear-gradient(135deg, #e6a817, #d4941a);
    color: #000;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.15s;
}
.jm-shared-load:hover { transform: scale(1.03); }

.jm-shared-dismiss {
    background: none;
    border: none;
    color: #888;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.2rem;
}
.jm-shared-dismiss:hover { color: #fff; }

/* ── Profile responsive ──── */
@media (max-width: 480px) {
    .jm-profile-panel { width: 100vw; max-width: 100vw; }
    .jm-shared-trip-banner { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   FULL-SCREEN CARD DETAIL VIEW
   ═══════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.jm-cd-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 1rem;
}
.jm-cd-overlay.open { opacity: 1; }

/* ── Modal ── */
.jm-cd-modal {
    position: relative;
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f1626 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    max-width: 900px; width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    transform: translateY(30px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.jm-cd-overlay.open .jm-cd-modal {
    transform: translateY(0) scale(1);
}

/* Scrollbar */
.jm-cd-modal::-webkit-scrollbar { width: 6px; }
.jm-cd-modal::-webkit-scrollbar-track { background: transparent; }
.jm-cd-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

/* ── Close button ── */
.jm-cd-close {
    position: absolute; top: 12px; right: 12px; z-index: 10;
    background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15);
    color: #ccc; font-size: 1.2rem;
    width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
}
.jm-cd-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* ── Image Gallery ── */
.jm-cd-gallery { position: relative; }

.jm-cd-main-img-wrap {
    position: relative;
    width: 100%; aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: #0a0a1a;
}
.jm-cd-main-img {
    width: 100%; height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.3s;
}
.jm-cd-main-img:hover { transform: scale(1.02); }

/* Gallery nav arrows */
.jm-cd-gal-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15);
    color: #fff; font-size: 1.8rem; line-height: 1;
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}
.jm-cd-gal-nav:hover { background: rgba(255,255,255,0.2); }
.jm-cd-gal-prev { left: 12px; }
.jm-cd-gal-next { right: 12px; }

.jm-cd-gal-counter {
    position: absolute; bottom: 12px; right: 12px;
    background: rgba(0,0,0,0.6); color: #ccc;
    padding: 4px 10px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 500;
    backdrop-filter: blur(4px);
}

/* Thumbnail strip */
.jm-cd-thumbs {
    display: flex; gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    background: rgba(0,0,0,0.3);
}
.jm-cd-thumbs::-webkit-scrollbar { height: 4px; }
.jm-cd-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.jm-cd-thumb {
    width: 60px; height: 42px;
    object-fit: cover; border-radius: 6px;
    cursor: pointer; flex-shrink: 0;
    opacity: 0.5; border: 2px solid transparent;
    transition: all 0.2s;
}
.jm-cd-thumb:hover { opacity: 0.8; }
.jm-cd-thumb.active { opacity: 1; border-color: #e6a817; }

/* ── Content area ── */
.jm-cd-content { padding: 1.5rem 2rem 2rem; }

.jm-cd-header { margin-bottom: 1.2rem; }

.jm-cd-title {
    font-size: 1.6rem; font-weight: 700;
    color: #fff; margin: 0 0 0.6rem;
    line-height: 1.3;
}

.jm-cd-badges {
    display: flex; gap: 8px; align-items: center;
    flex-wrap: wrap; margin-bottom: 0.5rem;
}

.jm-cd-cat {
    background: rgba(230,168,23,0.15);
    color: #e6a817; border: 1px solid rgba(230,168,23,0.3);
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
}

.jm-cd-price-badge {
    font-size: 0.85rem; font-weight: 700;
    letter-spacing: 1px;
}

.jm-cd-price-local {
    color: #888; font-size: 0.78rem;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px; border-radius: 4px;
}

/* Rating */
.jm-cd-rating {
    display: flex; align-items: center; gap: 6px;
    margin-top: 4px;
}
.jm-cd-rating-num { color: #fff; font-weight: 700; font-size: 0.95rem; }
.jm-cd-stars { color: #facc15; font-size: 0.95rem; letter-spacing: 1px; }
.jm-cd-rating-count { color: #666; font-size: 0.78rem; }

/* Description */
.jm-cd-description {
    margin-bottom: 1.2rem;
    padding: 1rem 1.2rem;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border-left: 3px solid rgba(230,168,23,0.4);
}
.jm-cd-description p {
    color: #bbb; font-size: 0.9rem; line-height: 1.7;
    margin: 0;
}

/* Hours */
.jm-cd-hours {
    margin-bottom: 1.2rem;
}
.jm-cd-hours h4 {
    color: #888; font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 1px; margin: 0 0 0.5rem;
}
.jm-cd-hours-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 4px;
}
.jm-cd-hour-row {
    color: #999; font-size: 0.8rem;
    padding: 3px 0;
}
.jm-cd-hour-row b {
    color: #ccc; font-weight: 600;
    margin-right: 4px;
}

/* ── Action buttons ── */
.jm-cd-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.jm-cd-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0.55rem 1rem;
    border-radius: 8px; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    text-decoration: none; border: none;
}

.jm-cd-btn-maps {
    background: rgba(66,133,244,0.15); color: #4285f4;
    border: 1px solid rgba(66,133,244,0.25);
}
.jm-cd-btn-maps:hover { background: rgba(66,133,244,0.25); }

.jm-cd-btn-web {
    background: rgba(255,255,255,0.06); color: #aaa;
    border: 1px solid rgba(255,255,255,0.1);
}
.jm-cd-btn-web:hover { background: rgba(255,255,255,0.12); color: #fff; }

.jm-cd-btn-add {
    background: rgba(230,168,23,0.15); color: #e6a817;
    border: 1px solid rgba(230,168,23,0.3);
}
.jm-cd-btn-add:hover { background: rgba(230,168,23,0.25); }
.jm-cd-btn-add.jm-cd-btn-remove {
    background: rgba(239,68,68,0.15); color: #ef4444;
    border-color: rgba(239,68,68,0.3);
}
.jm-cd-btn-add.jm-cd-btn-remove:hover { background: rgba(239,68,68,0.25); }

.jm-cd-btn svg { flex-shrink: 0; }

/* ── Lightbox ── */
.jm-lightbox {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,0.95);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.25s;
    cursor: zoom-out;
}
.jm-lightbox.open { opacity: 1; }

.jm-lightbox-img {
    max-width: 95vw; max-height: 95vh;
    object-fit: contain;
    border-radius: 4px;
}

.jm-lightbox-close {
    position: absolute; top: 16px; right: 16px;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; font-size: 1.3rem;
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.jm-lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* ── Card detail info button ── */
.jm-card-info-btn {
    position: absolute; top: 8px; left: 8px; z-index: 5;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.15);
    color: #ddd; font-size: 0.7rem; font-weight: 700;
    width: 26px; height: 26px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
    line-height: 1;
}
.jm-card-info-btn:hover {
    background: rgba(230,168,23,0.4); color: #fff;
    border-color: rgba(230,168,23,0.5);
    transform: scale(1.1);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .jm-cd-overlay { padding: 0; }
    .jm-cd-modal {
        max-height: 100vh; height: 100vh;
        border-radius: 0;
        max-width: 100%;
    }
    .jm-cd-main-img-wrap { border-radius: 0; aspect-ratio: 4/3; }
    .jm-cd-content { padding: 1rem 1.2rem 1.5rem; }
    .jm-cd-title { font-size: 1.3rem; }
    .jm-cd-actions { flex-direction: column; }
    .jm-cd-btn { justify-content: center; }
}