/* v0.1.43 | 2025-12-19 01:06 UTC+05:30 | Journeys: hide progress photo tab indicator when [hidden] */
/* v0.1.42 | 2025-12-18 23:55 UTC+05:30 | Journeys: progress compare summary pill state colors */
/* v0.1.41 | 2025-12-18 21:11 UTC+05:30 | Journeys: fix [hidden] behavior for metric cards + none mode hint layout */
/* v0.1.39 | 2025-12-13 00:17 UTC+5:30 | Journeys: journey share button + share link modal */

:root {
    --sh-primary: #3A91CD;
    --sh-secondary: #667eea;
    --sh-accent: #0073aa;
    --sh-success: #2196F3;
    --sh-dark: #0a0a0a;
    --sh-card-bg: rgba(58, 145, 205, 0.05);
    --sh-border: rgba(58, 145, 205, 0.15);
    --sh-gradient: rgba(33, 150, 243, 0.3);
}

#usrjrn-root {
    --sh-primary: #3A91CD;
    --sh-secondary: #667eea;
    --sh-accent: #0073aa;
    --sh-success: #2196F3;
    --sh-dark: #0a0a0a;
    --sh-card-bg: rgba(58, 145, 205, 0.05);
    --sh-border: rgba(58, 145, 205, 0.15);
    --sh-gradient: rgba(33, 150, 243, 0.3);
}

.timeline-carousel__item.usrjrn-milestone-anchored .timeline-carousel__image {
    border-radius: 18px;
}

.timeline-carousel__item.usrjrn-milestone-anchored .timeline-carousel__image .media-wrapper {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
}

.timeline-carousel__item.usrjrn-milestone-anchored .timeline-carousel__image .media-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 2px rgba(58, 145, 205, 0.95),
        0 0 18px rgba(58, 145, 205, 0.35),
        0 0 46px rgba(58, 145, 205, 0.22);
}

/* ============================================
   MESSAGE MODAL
   ============================================ */

.sh-message-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

#usrjrn-time-picker-modal {
    position: fixed;
    inset: 0;
}

#usrjrn-time-picker-modal[hidden] {
    display: none !important;
}

#usrjrn-time-picker-modal .sh-modal-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
}

#usrjrn-time-picker-modal .sh-modal-content {
    position: relative;
    z-index: 1;
}

.sh-modal-content {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    padding: 24px;
}

.sh-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.sh-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #ffffff;
}

.sh-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px;
}

.btn-quick-company {
    background: rgba(0, 115, 170, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 115, 170, 0.3);
  padding: 8px 16px !important;
  border-radius: 8px;
  margin: 10px 0px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

/* Ensure icons inside quick-company buttons are consistently sized */
.btn-quick-company i,
.btn-quick-company svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-quick-company:hover {
    background: rgba(0, 115, 170, 0.3);
    border-color: rgba(0, 115, 170, 0.5);
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
}
.sh-modal-close:hover {
    color: #ffffff;
}

.sh-modal-close i {
    width: 20px;
    height: 20px;
}

.sh-modal-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#usrjrn-time-picker-modal .usrjrn-time-picker-content {
    max-width: 520px;
    width: calc(100% - 32px);
}

#usrjrn-time-picker-modal .usrjrn-time-picker-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#usrjrn-time-picker-modal .usrjrn-time-picker-row label {
    color: rgba(255,255,255,0.9);
    font-size: 13px;
}

#usrjrn-time-picker-modal .usrjrn-time-picker-row select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    min-width: 84px;
}

#usrjrn-time-picker-modal .usrjrn-time-pick-sec-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#usrjrn-time-picker-modal .usrjrn-time-picker-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.sh-modal-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sh-modal-action:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sh-modal-action.danger {
    border-color: rgba(231, 76, 60, 0.5);
}

.sh-modal-action.danger:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: rgba(231, 76, 60, 0.7);
}

.sh-modal-action i {
    width: 18px;
    height: 18px;
}
.btn-red {
    background: #dc35454d;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid #dc35459c;
  }
  .btn-success {
    background: rgba(40,167,69,0.35);
    color: rgba(255,255,255,0.95);
    border: 1px solid rgba(40,167,69,0.7);
  }
  .btn-view {
    display: inline-block;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
}

.lista-btn {
    color: white;
   margin: 10px 0px;
    background: rgba(255, 255, 255, 0.08);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.25);
    border-image: initial;
}

.usrjrn-section { padding: 8px 0 0; color: #fff; }
.usrjrn-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.usrjrn-header-left { display:flex; flex-direction:column; gap:8px; max-width:520px; }
.usrjrn-header-right { display:flex; align-items:flex-start; }
.usrjrn-subtitle { margin:0; opacity:0.9; font-size:14px; }
.usrjrn-btn { border-radius:8px; padding:8px 16px; font-size:13px; display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; cursor:pointer; transition:all .3s ease; }
.usrjrn-btn-primary,
.usrjrn-btn-success { background:rgba(40,167,69,0.2); color:rgba(255,255,255,0.9); border-color:rgba(40,167,69,0.3); }
.usrjrn-btn-primary:hover,
.usrjrn-btn-success:hover { background:rgba(40,167,69,0.3); }
.usrjrn-btn-secondary { background:rgba(0,115,170,0.2); color:rgba(255,255,255,0.9); border-color:rgba(0,115,170,0.3); }
.usrjrn-btn-secondary:hover { background:rgba(0,115,170,0.3); }
.usrjrn-btn-danger { background:rgba(248,113,113,0.22); color:#fecaca; border-color:rgba(248,113,113,0.4); }
.usrjrn-btn-danger:hover { background:rgba(248,113,113,0.3); box-shadow:0 14px 34px rgba(0,0,0,0.6); }
.usrjrn-btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,0.2); }
.usrjrn-card .lucide { width:16px; height:16px; stroke-width:1.8; }
.usrjrn-filters { display:flex; gap:8px; margin:8px 0 16px; flex-wrap:wrap; }
.usrjrn-filter-btn { padding:6px 12px; border-radius:999px; border:none; cursor:pointer; font-size:13px; background:rgba(255,255,255,0.06); color:#fff; }
.usrjrn-filter-btn.is-active { background:rgba(57,145,205,0.9); }
.usrjrn-list { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:4px; transition:opacity .2s ease; }
.usrjrn-list-hidden { opacity:0; pointer-events:none; position:absolute; width:0; height:0; overflow:hidden; }
.usrjrn-card { border-radius:18px; padding:16px 18px 14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); box-shadow:0 22px 52px rgba(0,0,0,0.6); height:100%; min-height:260px; }
.usrjrn-card-layout { display:flex; gap:18px; align-items:stretch; }
.usrjrn-card-photo { flex:0 0 150px; border-radius:16px; background:#020617; background-size:cover; background-position:center; aspect-ratio:2 / 3; position:relative; overflow:hidden; cursor:pointer; }
.usrjrn-card-photo--placeholder {
  background-color:rgba(255,255,255,0.06);
  background-image:url('https://www.sportshunter.gr/wp-content/plugins/sh-reviews/assets/img/sh_3d_logo.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:40%;
}
.usrjrn-card-photo--placeholder span {
  position:absolute;
  left:6px;
  right:6px;
  bottom:6px;
  top:auto;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  font-size:10px;
  color:rgba(226,232,240,0.9);
  text-align:center;
  padding:0 6px;
}
.usrjrn-card-main { flex:1 1 auto; display:flex; flex-direction:column; gap:8px; }
.usrjrn-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin:0 10px 4px 0; }
.usrjrn-card-title { margin:0; font-size:17px; font-weight:600; }
.usrjrn-status { font-size:11px; padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:0.06em; background:rgba(0,0,0,0.35); color:#e5e7eb; }
.usrjrn-status-active { background:rgba(0,115,170,0.24); color:#8fd1ff; }
.usrjrn-status-completed { background:rgba(40,167,69,0.24); color:#9dffb7; }
.usrjrn-status-archived { background:rgba(149,165,166,0.24); color:#dde5e8; }
.usrjrn-card-dates { margin:0 0 4px; font-size:13px; opacity:0.86; }
.usrjrn-card-desc { margin:0; font-size:14px; opacity:0.92; }
.usrjrn-card-meta { display:flex; flex-direction:column; align-items:flex-start; flex-wrap:wrap; gap:6px; margin-top:8px; }
.usrjrn-progress { display:flex; flex-direction:column; gap:4px; min-width:100%; }
.usrjrn-progress-bar { width:100%; height:8px; border-radius:999px; background:rgba(15,23,42,0.9); overflow:hidden; box-shadow:0 0 0 1px rgba(15,23,42,0.95); }
.usrjrn-progress-bar span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,rgba(40,167,69,0.98),rgba(0,115,170,0.98)); }
.usrjrn-progress-label { font-size:12px; opacity:0.95; font-weight:600; }
.usrjrn-progress-label::before { content:"Πρόοδος · "; opacity:0.9; font-weight:500; }

 .usrjrn-progress-delta { font-size:12px; font-weight:600; opacity:0.95; }
 .usrjrn-progress-delta--good { color:#22c55e; }
 .usrjrn-progress-delta--bad { color:#f97316; }
 .usrjrn-progress-delta--flat { color:#e5e7eb; opacity:0.75; }
.usrjrn-actions { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; flex:1 1 auto; width:100%; }

/* Full-width progress row at bottom of card */
.usrjrn-card-progress-row {
  margin-top:8px;
}
.usrjrn-card-progress-row .usrjrn-progress {
  min-width:0;
  width:100%;
}

/* Status + progress label row (status left, progress right) */
.usrjrn-card-status-progress-row {
  margin:4px 0 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

/* Bottom actions row: three buttons in one row */
.usrjrn-card-actions-row {
  margin-top:8px;
}
.usrjrn-card-actions-row .usrjrn-card-meta {
  width:100%;
}
.usrjrn-card-actions-row .usrjrn-actions {
  width:100%;
  justify-content:flex-end;
}

@media (max-width: 540px) {
  .usrjrn-card-actions-row .usrjrn-actions {
    gap:6px;
     justify-content:space-between;
  }
  .usrjrn-card-actions-row .usrjrn-actions .usrjrn-btn {
    flex:1 1 0;
    justify-content:center;
  }
}
.usrjrn-fullview-actions-row {
  display:flex;
  gap:10px;
  align-items:stretch;
}

/* Fullview header actions: ensure all main CTAs share equal width */
.usrjrn-fullview-actions-row > .sh-action-btn,
.usrjrn-fullview-actions-row > .usrjrn-btn,
.usrjrn-fullview-actions-row > .usrjrn-fullview-progress-cta {
  flex:1 1 0;
}

.usrjrn-fullview-actions-row > .sh-action-btn,
.usrjrn-fullview-actions-row > .usrjrn-btn {
  justify-content:center;
 /* justify-content:center;
  height:42px;
  padding-top:0;
  padding-bottom:0;*/
}

/* Keep progress block layout: label button grows, info pill stays compact */
.usrjrn-fullview-progress-cta {
  display:flex;
  align-items:center;
  gap:6px;
}

.usrjrn-fullview-progress-cta .usrjrn-btn {
  flex:1 1 0;
}

.usrjrn-fullview-progress-info {
  flex:0 0 auto;
}

@media (max-width: 768px) {
  .usrjrn-fullview-actions-row {
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .usrjrn-fullview-actions-row > .sh-action-btn,
  .usrjrn-fullview-actions-row > .usrjrn-btn,
  .usrjrn-fullview-actions-row > .usrjrn-fullview-progress-cta {
    width:100%;
  }
}

/* Journeys card actions: Πλάνο (γκρι), Προβολή (μπλε / secondary), Καταγραφή (πράσινο / primary) */
.usrjrn-actions .usrjrn-btn-plan {
  background:rgba(148,163,184,0.16);
  border-color:rgba(148,163,184,0.35);
  color:rgba(226,232,240,0.96);
}
.usrjrn-actions .usrjrn-btn-plan:hover {
  background:rgba(148,163,184,0.24);
}

/* Wizard metrics step: inline validation */
.usrjrn-metrics-error {
  margin-top:6px;
  font-size:12px;
  color:#f87171;
}
.usrjrn-metric-input.usrjrn-metric-input--error {
  border-color:#dc3545;
  box-shadow:0 0 0 1px rgba(220,53,69,0.65);
}

.usrjrn-filter-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  min-width:20px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(15,23,42,0.85);
  font-size:11px;
  font-weight:600;
}

/* Journeys tab header: back/flag link styling */
.usrjrn-title-default {
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.usrjrn-fullview-back-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:inherit;
  text-decoration:none;
}
.usrjrn-fullview-back-link:hover {
  text-decoration:underline;
}
.usrjrn-fullview-back-link .lucide {
  width:20px;
  height:20px;
}

/* Default: δείχνουμε μόνο τη σημαία (plain τίτλος) */
.usrjrn-title-fullview { display:none; }

/* Όταν είμαστε σε fullview: κρύψε τη σημαία, δείξε το back-link */
#sh-tab-journeys .sh-section.usrjrn-has-fullview .usrjrn-title-default { display:none; }
#sh-tab-journeys .sh-section.usrjrn-has-fullview .usrjrn-title-fullview { display:inline-flex; }

@media (min-width: 900px) {
  .usrjrn-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.usrjrn-actions .usrjrn-btn { padding:6px 10px; font-size:12px; }
.usrjrn-empty { text-align:center; padding:24px 12px; opacity:0.9; display:flex; flex-direction:column; align-items:center; gap:8px; }
.usrjrn-empty i { opacity:0.9; }

/* When fullview is active, hide journeys list header completely */
.usrjrn-has-fullview .usrjrn-header { display:none !important; }

@media (max-width:1200px) {
  .usrjrn-actions { justify-content:flex-start; }
}

/* Modal */
.usrjrn-modal[hidden] { display:none; }
.usrjrn-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; }
.usrjrn-modal-backdrop { position:absolute; inset:0; background:rgba(89,98,106,0.43); backdrop-filter:blur(8px); }
.usrjrn-modal-dialog { position:relative; width:100%; max-width:720px; min-height:360px; border-radius:24px; background:#111; border:1px solid rgba(255,255,255,0.08); box-shadow:0 32px 80px rgba(0,0,0,0.75); padding:20px 24px 18px; z-index:1; }
.usrjrn-modal-dialog-progress { max-width:960px; }

/* Wizard-specific modal layout */
.usrjrn-modal-dialog-wizard {
  padding:0;
}
.usrjrn-modal-dialog-wizard .usrjrn-modal-inner {
  display:flex;
  flex-direction:column;
  height:100%;
  padding:20px 24px 18px;
}
#usrjrn-wizard .usrjrn-modal-body {
  flex:1 1 auto;
}
#usrjrn-wizard .usrjrn-modal-footer {
  margin-top:12px;
}

.usrjrn-modal-loading {
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.usrjrn-modal-loading-inner {
  padding:10px 14px;
  border-radius:999px;
  background:rgba(15,23,42,0.96);
  border:1px solid rgba(148,163,184,0.7);
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#e5e7eb;
  font-size:13px;
}
.usrjrn-modal-loading-inner i { color:#38bdf8; }

.usrjrn-modal.is-loading .usrjrn-modal-dialog {
  opacity:0.55;
  pointer-events:none;
}

.usrjrn-modal-compare .usrjrn-modal-dialog {
  display:flex;
  flex-direction:column;
  max-height: calc(100vh - 32px);
  overflow: hidden;
}
.usrjrn-modal-compare .usrjrn-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding-right:0;
}
.usrjrn-modal.is-loading .usrjrn-modal-loading {
  display:flex;
}
.usrjrn-modal-header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }
.usrjrn-modal-title { margin:0; font-size:18px; font-weight:600; }
.usrjrn-modal-close { background:transparent; border:none; color:#fff; padding:4px; cursor:pointer; border-radius:999px; }
.usrjrn-modal-body { max-height:60vh; overflow-y:auto; padding-right:4px; position:relative; }
.usrjrn-modal-footer { display:flex; justify-content:space-between; gap:8px; margin-top:16px; }

/* Journey share modal: match timeline share modal sizing/look and pin OK button to bottom */
#usrjrn-share-modal .usrjrn-modal-dialog {
  display:flex;
  flex-direction:column;
  max-height:680px;
  height:75vh;
  width:480px;
  max-width:92vw;
  background:rgba(15,15,15,0.98);
  color:#fff;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,0.8);
  overflow:hidden;
  animation:slideUp 0.3s ease;
}
#usrjrn-share-modal .usrjrn-modal-body {
  flex:1 1 auto;
  max-height:none;
}
#usrjrn-share-modal .usrjrn-modal-footer {
  margin-top:0;
  justify-content:flex-end;
}

/* Journey-level actions modal (kebab next to journey title) */
#usrjrn-journey-menu-modal .usrjrn-modal-dialog {
  display:flex;
  flex-direction:column;
}

#usrjrn-journey-menu-modal .usrjrn-modal-body {
  flex:1 1 auto;
  display:flex;
  justify-content:center;
}

#usrjrn-journey-menu-modal .usrjrn-modal-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 260px;
    margin: 8px auto 4px;
    gap: 10px;
    justify-content: center;
}

#usrjrn-journey-menu-modal .usrjrn-modal-actions .usrjrn-btn {
  width:100%;
  justify-content:flex-start;
}

#usrjrn-journey-menu-modal .usrjrn-modal-footer {
  justify-content:flex-start;
}

/* Journey share link modal */
.usrjrn-share-body {
  padding-right:0;
}

/* Wizard steps layout */
.usrjrn-wizard-step {
  min-height:260px;
}

/* Progress modal fields */
.usrjrn-progress-body { display:flex; flex-direction:column; gap:14px; }
.usrjrn-progress-field { margin-bottom:12px; }
.usrjrn-progress-current {
  padding:10px 2px;
  border-radius:12px;
  /*background:rgba(15,23,42,0.9);
  border:1px solid rgba(148,163,184,0.5);*/
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  justify-content:space-between;
}
.usrjrn-progress-current-main {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.usrjrn-progress-current-label {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  opacity:0.8;
}
.usrjrn-progress-current-title {
  font-size:24px;
  font-weight:700;
}
.usrjrn-progress-current-date {
  font-size:12px;
  opacity:0.85;
}
.usrjrn-progress-current-meta {
  display:none;
}
.usrjrn-progress-current-actions {
  margin-left:auto;
}
.usrjrn-progress-current-actions .usrjrn-btn {
  padding:6px 10px;
  font-size:12px;
}

.usrjrn-progress-milestone-grid { margin-top:8px; display:grid; grid-template-columns:1fr; gap:8px; }
.usrjrn-progress-milestone-card {
  position:relative;
  border-radius:14px;
  padding:8px 12px;
  background:rgba(15,23,42,0.85);
  border:1px solid rgba(148,163,184,0.25);
  color:#e5e7eb;
  cursor:pointer;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  opacity:0.55;
  transform:scale(0.97);
  transition:all .18s ease;
}
.usrjrn-progress-milestone-card:hover {
  opacity:0.7;
  box-shadow:0 10px 28px rgba(0,0,0,0.6);
  border-color:rgba(148,163,184,0.4);
}
.usrjrn-progress-milestone-card.is-active {
  opacity:1;
  transform:scale(1);
  border-color:rgba(0,115,170,0.9);
  box-shadow:0 18px 40px rgba(0,0,0,0.9);
  background:linear-gradient(135deg,rgba(0,115,170,0.35),rgba(230,57,70,0.25));
}
.usrjrn-progress-milestone-card.is-locked {
  opacity:0.35;
  cursor:default;
}
.usrjrn-progress-milestone-card.is-active::after {
  content:"Επιλεγμένο";
  position:absolute;
  top:8px;
  right:10px;
  font-size:10px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(56,189,248,0.18);
  color:#7dd3fc;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.usrjrn-progress-milestone-card-status {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:0.9;
}
.usrjrn-progress-milestone-card-title { font-weight:600; font-size:14px; }
.usrjrn-progress-milestone-card-date { font-size:12px; opacity:0.78; }

.usrjrn-progress-milestone-card.is-unlocked .usrjrn-progress-milestone-card-status { color:rgba(0,115,170,0.9); }
.usrjrn-progress-milestone-card.is-completed .usrjrn-progress-milestone-card-status { color:#2ecc71; }
.usrjrn-progress-milestone-card.is-locked .usrjrn-progress-milestone-card-status { color:rgba(148,163,184,0.9); }

.usrjrn-progress-steps {
  display:flex;
  gap:4px;
}
.usrjrn-progress-step-indicator {
  flex:1 1 0;
  padding:8px 14px;
  border-radius:999px;
  border:0;
  background:rgba(15,23,42,0.9);
  display:flex;
  align-items:center;
  gap:8px;
  cursor:default;
  font-size:13px;
  color:rgba(148,163,184,0.9);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.usrjrn-progress-step-indicator-number {
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(30,64,175,0.35);
  font-size:14px;
  font-weight:600;
}
.usrjrn-fullview-title-row {
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-direction:row;
  margin:0 0 10px;
}
.usrjrn-fullview-title-actions {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.usrjrn-journey-kebab-btn {
  width:34px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.7);
  background:rgba(15,23,42,0.9);
  color:#e5e7eb;
  font-size:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.usrjrn-journey-kebab-btn { margin-top:4px; }
.usrjrn-journey-share-btn .lucide {
  width:16px;
  height:16px;
}
.usrjrn-progress-step-indicator-label {
  font-weight:500;
}
.usrjrn-progress-step-indicator.is-active {
  background:rgb(26 48 28);
  color:#e5e7eb;
  box-shadow:0 10px 26px rgba(15,23,42,0.8);
}
.usrjrn-progress-step-indicator.is-active .usrjrn-progress-step-indicator-number {
  background:rgba(22,163,74,1);
  color:#022c22;
}
.usrjrn-progress-step-indicator.is-completed {
  /* Completed: keep dark background like pending, but use green text to differentiate */
  background:rgba(15,23,42,0.9);
  color:#4ade80;
  cursor:pointer;
}
.usrjrn-progress-step-indicator.is-completed .usrjrn-progress-step-indicator-number {
  background:rgba(15,23,42,1);
  border:1px solid rgba(34,197,94,0.9);
  color:#4ade80;
}

/* Progress modal footer: fully hide Back button when JS sets hidden attribute (e.g. on step 1) */
#usrjrn-progress-cancel[hidden] {
  display:none !important;
}

 #usrjrn-progress-steps .usrjrn-progress-step-indicator[hidden] {
   display:none !important;
 }

/* Progress modal footer layout: keep Next/save button aligned to the right */
.usrjrn-modal-dialog-progress .usrjrn-modal-footer {
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
}
.usrjrn-modal-dialog-progress #usrjrn-progress-save {
  margin-left:auto;
}

/* Reactions & Comments (reuse exact Timeline styling) */
.sh-reactions-summary { display: flex; align-items: center; gap: 6px; padding: 0 8px; color: rgba(255,255,255,1); font-size: 13px; cursor: pointer; transition: all 0.2s; }
.sh-reactions-summary:hover { color: rgba(255,255,255,0.9); }
.sh-reactions-icons-stack { display: flex; align-items: center; position: relative; height: 20px; }
.sh-reaction-emoji-item { font-size: 16px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: rgba(26, 26, 46, 0.9); border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); margin-left: -6px; }
.sh-reaction-emoji-item:first-child { margin-left: 0; }
.sh-action-btn.active { background: transparent; border: 2px solid var(--sh-primary); color: var(--sh-primary); }
.sh-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Comments Section */
.sh-card-footer { display: flex; flex-direction: column; border-top: 1px solid var(--sh-border); }

/* Stats Bar - Facebook style (above action buttons) */
.sh-stats-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--sh-border); }
.sh-stats-left { display: flex; align-items: center; gap: 8px; }
.sh-stats-right { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.sh-stat-item { color: rgba(255,255,255,0.6); font-size: 13px; }
.sh-stat-item:hover { text-decoration: none; color: rgba(255,255,255,0.8); }

.sh-comments-section { background: rgba(0,0,0,0.2); border-top: 1px solid var(--sh-border); padding: 16px; }
.sh-comments-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; max-height: 400px; overflow-y: auto; }
.sh-comment { display: flex; gap: 12px; }
.sh-comment-avatar { flex-shrink: 0; }
.sh-comment-avatar img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--sh-border); }
.sh-comment-content { flex: 1; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 10px 14px; }
.sh-comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sh-comment-author { font-weight: 700; color: var(--sh-primary); font-size: 14px; }
.sh-comment-time { font-size: 12px; color: rgba(255,255,255,0.5); }
.sh-comment-text { color: rgba(255,255,255,0.9); font-size: 14px; line-height: 1.5; }
.sh-no-comments { text-align: center; color: rgba(255,255,255,0.5); font-size: 14px; padding: 20px; }

/* Comment Form */
.sh-comment-form { display: flex; gap: 10px; align-items: flex-end; }
.sh-comment-input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--sh-border); border-radius: 12px; padding: 10px 14px; color: white; font-size: 14px; resize: vertical; min-height: 44px; max-height: 120px; font-family: inherit; }
.sh-comment-input:focus { outline: none; border-color: var(--sh-primary); background: rgba(255,255,255,0.08); }
.sh-comment-input[readonly] { cursor: pointer; opacity: 0.7; }
.sh-comment-input[readonly]:hover { opacity: 0.9; }

/* Button-like comment input for non-logged/non-activated users */
.sh-comment-input-button { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--sh-border); border-radius: 12px; padding: 12px 14px; color: rgba(255,255,255,0.6); font-size: 14px; cursor: pointer; min-height: 44px; display: flex; align-items: center; transition: all 0.3s ease; }
.sh-comment-input-button:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.2); }

.sh-comment-submit { background: rgba(33, 150, 243, 0.2); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(33, 150, 243, 0.3); border-radius: 12px; padding: 10px 20px; font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap; height: 44px; }
.sh-comment-submit:hover { transform: translateY(-2px); background: rgba(33, 150, 243, 0.3); box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3); }
.sh-comment-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Footer action buttons row (like timeline card footer) */
.sh-footer-actions { display: flex; align-items: center; gap: 8px; padding: 8px 12px; width: 100%; }
.sh-action-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 10px; border: 1px solid var(--sh-border); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none; }
.sh-action-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.sh-action-label:hover { color: #fff; }

/* Wizard create steps (top stepper) */
.usrjrn-wizard-steps {
  display:flex;
  gap:8px;
  margin:4px 0 16px;
}
.usrjrn-wizard-step-indicator {
  flex:1 1 0;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.4);
  background:rgba(15,23,42,0.95);
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#e5e7eb;
}
.usrjrn-wizard-step-indicator-number {
  width:20px;
  height:20px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(30,64,175,0.8);
  font-size:11px;
  font-weight:600;
}
.usrjrn-wizard-step-indicator-label {
  font-weight:500;
}
.usrjrn-wizard-step-indicator.is-active {
  border-color:rgba(56,189,248,0.9);
  box-shadow:0 10px 26px rgba(0,0,0,0.7);
}
.usrjrn-wizard-step-indicator.is-active .usrjrn-wizard-step-indicator-number {
  background:rgba(56,189,248,0.95);
  color:#0f172a;
}
.usrjrn-wizard-step-indicator.is-completed {
  border-color:rgba(34,197,94,0.9);
}
.usrjrn-wizard-step-indicator.is-completed .usrjrn-wizard-step-indicator-number {
  background:rgba(34,197,94,0.95);
  color:#0f172a;
}

.usrjrn-progress-step {
  display:none;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.usrjrn-progress-step.is-active {
  display:flex;
}
.usrjrn-progress-step-header {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.usrjrn-progress-step-title-main {
  font-size:22px;
  font-weight:600;
}
.usrjrn-progress-step-subtitle {
  margin:0;
  font-size:13px;
  opacity:0.85;
}
.usrjrn-progress-step-body {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.usrjrn-progress-next-hint {
  margin:4px 0 0;
  font-size:12px;
  opacity:0.8;
}

.usrjrn-progress-photo {
  margin-top:16px;
  padding:20px;
  background:rgba(255,255,255,0.03);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.usrjrn-progress-photo-preview {
  width:100%;
  max-width:260px;
  aspect-ratio:2 / 3;
  border-radius:16px;
  background:#020617;
  border:1px solid rgba(148,163,184,0.45);
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}
.usrjrn-progress-photo-preview::before {
  content:"Προβολή φωτογραφίας milestone";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:rgba(148,163,184,0.9);
  text-align:center;
  padding:0 10px;
}
.usrjrn-progress-photo-preview.has-photo::before {
  content:"";
}
.usrjrn-progress-photo-actions { display:flex; flex-wrap:wrap; gap:8px; }
.usrjrn-progress-photo-hint { margin:0; font-size:12px; opacity:0.8; }

.usrjrn-progress-compare-body {
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:20px 24px;
}
.usrjrn-progress-compare-scroll {
  flex:1 1 auto;
  min-height: 0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.usrjrn-progress-compare-intro {
  font-size:13px;
  line-height:1.5;
  color:rgba(226,232,240,0.85);
  margin-bottom:4px;
}
.usrjrn-progress-compare-layout {
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
  position:relative;
}
.usrjrn-progress-compare-header {
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
}
.usrjrn-progress-compare-pill {
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(15,23,42,0.6);
  border:1px solid rgba(148,163,184,0.24);
  color:#e5e7eb;
  font-size:12px;
  line-height:1.2;
}
.usrjrn-progress-compare-summary--good {
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.12);
  color: #bbf7d0;
}
.usrjrn-progress-compare-summary--bad {
  border-color: rgba(249,115,22,0.35);
  background: rgba(249,115,22,0.14);
  color: #fed7aa;
}
.usrjrn-progress-compare-summary--flat {
  border-color: rgba(148,163,184,0.24);
  background: rgba(15,23,42,0.6);
  color: #e5e7eb;
}
.usrjrn-progress-compare-toggle {
  position:absolute;
  left:40px;
  top:20px;
  z-index:2;
}
.usrjrn-progress-compare-col {
  flex:0 0 auto;
  max-width:320px;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.usrjrn-progress-compare-label { font-size:12px; text-transform:uppercase; letter-spacing:0.1em; opacity:0.8; text-align:center; }
.usrjrn-progress-compare-photo {
  width:100%;
  aspect-ratio:2 / 3;
  border-radius:20px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  box-shadow:0 22px 48px rgba(0,0,0,0.75);
  cursor:pointer;
}
.usrjrn-progress-compare-photo--placeholder {
  background:linear-gradient(135deg, rgba(57,145,205,0.3), rgba(230,57,70,0.3));
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.78);
  font-size:14px;
  text-align:center;
  padding:0 10px;
}
.usrjrn-progress-compare-meta { font-size:12px; opacity:0.9; }

.usrjrn-progress-metrics {
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.usrjrn-progress-metrics-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.usrjrn-progress-metrics-label {
  font-size:13px;
  font-weight:500;
  opacity:0.9;
}
.usrjrn-progress-metrics-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-left:12px;
}
.usrjrn-progress-metric-pill {
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.6);
  background:rgba(15,23,42,0.8);
  color:#e5e7eb;
  font-size:11px;
  padding:4px 9px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,transform .08s ease;
}
.usrjrn-progress-metric-pill:hover {
  background:rgba(30,64,175,0.7);
  border-color:rgba(191,219,254,0.9);
}
.usrjrn-progress-metric-pill.is-active {
  background:rgba(59,130,246,0.9);
  border-color:rgba(191,219,254,1);
  color:#f9fafb;
}
.usrjrn-progress-metrics-chart-wrap {
  position:relative;
  width:100%;
  min-height:180px;
  display:flex;
}
.usrjrn-progress-metrics-chart-wrap canvas {
  width:100% !important;
  height:100% !important;
}
.usrjrn-progress-metrics-forecast {
  font-size:13px;
  line-height:1.5;
  font-weight:500;
  color:#e5e7eb;
  opacity:1;
  margin-top:10px;
  padding:10px 12px 10px 14px;
  border-radius:14px;
  background:radial-gradient(circle at top left, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
  border:1px solid rgba(148,163,184,0.6);
  position:relative;
  padding-right:64px;
}
.usrjrn-progress-metrics-forecast::before {
  content:"";
  position:absolute;
  right:10px;
  bottom:8px;
  width:42px;
  height:42px;
  background-image:url('https://www.sportshunter.gr/wp-content/plugins/sh-reviews/assets/img/sh_3d_logo.png');
  background-repeat:no-repeat;
  background-size:contain;
  opacity:0.9;
  pointer-events:none;
}

@media (min-width: 900px) {
  .usrjrn-progress-compare-body {
    flex-direction:row;
    align-items:stretch;
    gap:24px;
     padding:20px 0px;
  }
  .usrjrn-progress-compare-layout {
    flex:0 0 45%;
    align-items:flex-start;
  }
  .usrjrn-progress-metrics {
    flex:0 0 50%;
    margin-top:0;
   /* height:100%;*/
  }
  .usrjrn-progress-metrics-chart-wrap {
    flex:1 1 auto;
    min-height:0;
  }
  .usrjrn-progress-compare-col {
    max-width:100%;
  }
  .usrjrn-modal-compare .usrjrn-modal-dialog {
    max-width:1040px;
  }
}

@media (max-width: 540px) {
    
  /* Stats Bar - Compact */
  .sh-stats-bar {
    padding: 8px 12px;
    font-size: 11px;
  }
    .usrjrn-progress-compare-body {

     padding:20px 0px;
  }
  /* Wizard modal: full-screen app-style only for New Goal wizard */
  #usrjrn-wizard.usrjrn-modal {
    align-items:stretch;
  }
  /* Journeys cards: πιο compact layout σε mobile ώστε να χωράει ολόκληρη κάρτα στην οθόνη */
  .usrjrn-card {
    padding:12px 12px 10px;
    min-height:0;
  }
  .usrjrn-card-layout {
    flex-direction:row;
    align-items:center;
    gap:10px;
  }
  .usrjrn-card-photo {
    flex:0 0 96px;
    max-width:96px;
    width:96px;
    margin:0;
  }
  .usrjrn-card-main {
    gap:6px;
  }
  .usrjrn-card-header {
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    margin:0 0 4px 0;
  }
  .usrjrn-status {
    align-self:flex-start;
  }
  .usrjrn-card-title {
    font-size:16px;
  }
  .usrjrn-card-desc {
    font-size:13px;
  }
 
  .usrjrn-progress-photo-preview {max-width: 160px;}
  .usrjrn-progress-photo {    align-items: center;}
  .usrjrn-wizard-step-indicator.is-active {    border: 1px solid rgba(56, 189, 248, 0.9);}
  #usrjrn-wizard .usrjrn-modal-dialog-wizard {
    display:flex;
    flex-direction:column;
    max-width:100%;
    height:100vh;
    max-height:100vh;
    border-radius:0;
  }
  #usrjrn-wizard .usrjrn-modal-dialog-wizard .usrjrn-modal-inner {
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    padding:16px 14px 8px;
  }
  #usrjrn-wizard .usrjrn-modal-body {
    flex:1 1 auto;
    max-height:none;
    padding-right:0;
    overflow-y:auto;
  }
  #usrjrn-wizard .usrjrn-modal-footer {
    position:sticky;
    bottom:0;
    left:0;
    right:0;
    margin-top:8px;
    padding-top:10px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, rgba(15,23,42,0.98), rgba(15,23,42,0.96) 60%, rgba(15,23,42,0));
  }

  /* Wizard stepper: 4 equal boxes without gaps or radius */
  .usrjrn-wizard-steps {
    display:flex;
    gap:0;
    margin:4px 0px 14px;
  }
  .usrjrn-wizard-step-indicator {
    flex:1 1 0;
    font-size:11px;
    padding:6px 4px;
    border-radius:0;
  }
  .usrjrn-wizard-step-indicator:last-child {
    border-right-width:1px; /* previously commented out */
  }
  .usrjrn-wizard-step-indicator-number {
    flex-shrink:0;
  }
  .usrjrn-wizard-step-indicator-label {
    white-space:nowrap;
    font-size:11px;
  }

  /* Progress modal: full-screen app-style on mobile, similar to wizard */
  #usrjrn-progress-modal.usrjrn-modal {
    align-items:stretch;
  }
  #usrjrn-progress-modal .usrjrn-modal-dialog-progress {
    display:flex;
    flex-direction:column;
    max-width:100%;
    height:100vh;
    max-height:100vh;
    border-radius:0;
    padding:16px 14px 14px;
  }
  #usrjrn-progress-modal .usrjrn-modal-body {
    flex:1 1 auto;
    max-height:calc(100vh - 120px);
    padding-right:0;
  }
  #usrjrn-progress-modal .usrjrn-modal-footer {
    margin-top:8px;
  }

  /* View Journey (Πλάνο) modal: full-screen on mobile */
  #usrjrn-view-modal.usrjrn-modal {
    align-items:stretch;
  }
  #usrjrn-view-modal .usrjrn-modal-dialog {
    max-width:100%;
    height:100vh;
    max-height:100vh;
    border-radius:0;
    padding:16px 14px 14px;
  }
  #usrjrn-view-modal .usrjrn-modal-body {
    max-height:calc(100vh - 80px);
    padding-right:0;
  }

  /* Progress compare modal: full-screen app-style on mobile, same pattern as progress modal */
  #usrjrn-progress-compare-modal.usrjrn-modal {
    align-items:stretch;
  }
  #usrjrn-progress-compare-modal .usrjrn-modal-dialog {
    display:flex;
    flex-direction:column;
    max-width:100%;
    height:100vh;
    max-height:100vh;
    border-radius:0;
    padding:16px 14px 14px;
  }
  #usrjrn-progress-compare-modal .usrjrn-modal-body {
    flex:1 1 auto;
    max-height:none;
    padding-right:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Progress stepper: 3 compact steps that fit in one row */
  #usrjrn-progress-modal .usrjrn-progress-steps {
    gap:0px;
  }
  #usrjrn-progress-modal .usrjrn-progress-step-indicator {
    padding:6px 6px;
    font-size:11px;
    border-radius:0px;
  }
  #usrjrn-progress-modal .usrjrn-progress-step-indicator-number {
    width:26px;
    height:26px;
    font-size:13px;
  }
  #usrjrn-progress-modal .usrjrn-progress-step-indicator-label {
    font-size:11px;
  }

  /* Metric cards (Τώρα / Στόχος) in New Goal wizard and progress modal */
  .usrjrn-metric-row {
    padding:12px 12px;
  }
  .usrjrn-metric-cards {
    flex-direction:column;
  }
  .usrjrn-metric-card {
    padding:16px 12px;
    gap:18px;
  }
  .usrjrn-metric-card-value-wrap {
    justify-content:center;
    gap:4px;
  }
  .usrjrn-metric-input {
    width:100%;
    max-width:128px;
    font-size:16px;
  }
  .usrjrn-metric-unit {
    font-size:11px;
  }

  /* Wizard text/date/select inputs: bump font-size to avoid iOS auto-zoom */
  #usrjrn-wizard .usrjrn-input {
    font-size:16px;
  }
}

/* Tablet / μικρά laptop: 540px–900px → progress compare modal ~90% ύψος με εσωτερικό scroll */
@media (min-width: 540px) and (max-width: 900px) {
  #usrjrn-progress-compare-modal.usrjrn-modal {
    align-items:center;
    justify-content:center;
  }
  #usrjrn-progress-compare-modal .usrjrn-modal-dialog {
    display:flex;
    flex-direction:column;
    max-width:100%;
    height:90vh;
    max-height:90vh;
    border-radius:16px;
  }
  #usrjrn-progress-compare-modal .usrjrn-progress-compare-scroll {
    flex:1 1 auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* Metrics layout in create wizard */
.usrjrn-metrics-list {
  display:flex;
  flex-direction:column;
  gap:14px;
}
.usrjrn-metric-row {
  padding:14px 16px;
  border-radius:16px;
  background:radial-gradient(circle at top left, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
  border:1px solid rgba(148,163,184,0.5);
}
.usrjrn-metric-row.is-disabled {
  opacity:0.55;
}
.usrjrn-metric-header {
  margin-bottom:8px;
}
.usrjrn-metric-header-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.usrjrn-metric-title {
  font-size:16px;
  font-weight:700;
}
.usrjrn-metric-unit-label {
  font-size:12px;
  opacity:0.85;
}
.usrjrn-metric-hint {
  margin-top:2px;
  font-size:12px;
  opacity:0.8;
}

.usrjrn-metric-mode {
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:260px;
}

.usrjrn-metric-mode-label {
  font-size:12px;
  font-weight:600;
  opacity:0.9;
}

.usrjrn-metric-mode-select {
  width:100%;
  height:38px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(2,6,23,0.55);
  border:1px solid rgba(148,163,184,0.55);
  color:#e5e7eb;
  font-size:13px;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}

.usrjrn-metric-mode-select:focus {
  border-color:rgba(56,189,248,0.95);
  box-shadow:0 0 0 2px rgba(56,189,248,0.25);
}

.usrjrn-metric-mode-select option {
  background:#0b1220;
  color:#e5e7eb;
}

/* Make sure hidden attribute always wins over other display rules */
.usrjrn-metric-row [hidden] {
  display:none !important;
}

.usrjrn-metric-none-hint {
  width:100%;
  padding:12px 14px;
  border:1px dashed rgba(148,163,184,0.45);
  border-radius:14px;
  background:rgba(2,6,23,0.35);
}
.usrjrn-metric-cards {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
}

/* Extra metrics container in progress modal: add vertical spacing from primary card */
#usrjrn-progress-extra-metrics {
  margin-top:10px;
}
.usrjrn-metric-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.45);
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.usrjrn-metric-card-label {
  font-size:18px;
  font-weight:600;
  text-transform:none;
  letter-spacing:0.02em;
  opacity:0.96;
}
.usrjrn-metric-card-value-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.usrjrn-metric-input {
  width:100%;
  max-width:132px;
  min-width:96px;
  text-align:center;
  font-size:16px;
  background:rgba(15,23,42,0.98);
  border-radius:10px;
  border:1px solid rgba(148,163,184,0.6);
  color:#e5e7eb;
  padding:6px 8px;
}
.usrjrn-metric-unit {
  font-size:12px;
  opacity:0.85;
}
.usrjrn-metric-btn {
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.7);
  background:rgba(15,23,42,0.9);
  color:#e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:15px;
  line-height:1;
  padding:0;
}
.usrjrn-metric-btn:hover {
  border-color:rgba(56,189,248,0.9);
}

.usrjrn-metric-toggle {
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}
.usrjrn-metric-toggle input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.usrjrn-metric-toggle-pill {
  width:34px;
  height:18px;
  border-radius:999px;
  background:rgba(15,23,42,0.9);
  border:1px solid rgba(148,163,184,0.8);
  display:flex;
  align-items:center;
  padding:0 2px;
  transition:all .15s ease;
}
.usrjrn-metric-toggle-knob {
  width:14px;
  height:14px;
  border-radius:999px;
  background:#9ca3af;
  transform:translateX(0);
  transition:all .15s ease;
}
.usrjrn-metric-toggle input:checked + .usrjrn-metric-toggle-pill {
  background:rgba(56,189,248,0.3);
  border-color:rgba(56,189,248,0.9);
}
.usrjrn-metric-toggle input:checked + .usrjrn-metric-toggle-pill .usrjrn-metric-toggle-knob {
  background:#e0f2fe;
  transform:translateX(14px);
}

/* Remove native spin buttons for wizard metric inputs (for cleaner UI) */
.usrjrn-metric-input::-webkit-outer-spin-button,
.usrjrn-metric-input::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0;
}
.usrjrn-metric-input[type=number] {
  appearance:textfield;
  -moz-appearance:textfield;
}
.usrjrn-progress-compare-meta span { display:block; }

.usrjrn-measure-display {
  margin-top:4px;
  padding:10px 12px;
  border-radius:14px;
  background:radial-gradient(circle at top, rgba(34,197,94,0.24), rgba(15,23,42,0.96));
  box-shadow:0 18px 40px rgba(0,0,0,0.7);
  border:1px solid rgba(34,197,94,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
}
.usrjrn-input-measure {
  width:100%;
  text-align:center;
  font-size:26px;
  font-weight:700;
  letter-spacing:0.04em;
  color:#bbf7d0;
  background:transparent;
  border:none;
  box-shadow:none;
}
.usrjrn-input-measure:focus {
  outline:none;
  box-shadow:none;
}
.usrjrn-input-measure::-webkit-outer-spin-button,
.usrjrn-input-measure::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0;
}
.usrjrn-input-measure[type=number] {
  appearance:textfield;
  -moz-appearance:textfield;
}

.usrjrn-input-sm {
  padding:5px 8px;
  font-size:13px;
}

.usrjrn-measure-slider {
  width:100%;
  margin-top:10px;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:999px;
  background:rgba(15,23,42,0.9);
  outline:none;
}
.usrjrn-modal-progress .usrjrn-measure-slider {
  display:none !important;
}
.usrjrn-measure-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:999px;
  background:#38bdf8;
  border:2px solid #0f172a;
  box-shadow:0 4px 10px rgba(0,0,0,0.6);
  cursor:pointer;
}
.usrjrn-measure-slider::-moz-range-thumb {
  width:16px;
  height:16px;
  border-radius:999px;
  background:#38bdf8;
  border:2px solid #0f172a;
  box-shadow:0 4px 10px rgba(0,0,0,0.6);
  cursor:pointer;
}
.usrjrn-measure-slider::-moz-range-track {
  height:4px;
  border-radius:999px;
  background:rgba(15,23,42,0.9);
}

/* Milestone Image Upload Modal (journeys-only) */
.usrjrn-img-modal { position:fixed; inset:0; z-index:10000; display:none; }
.usrjrn-img-overlay {
  position:absolute;
  inset:0;
  background:rgba(89,98,106,0.43);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.usrjrn-img-hide {display: none!important;}
.usrjrn-img-content { width:96vw; max-width:860px; max-height:92vh; background:#020617; border-radius:20px; border:1px solid rgba(148,163,184,0.4); box-shadow:0 28px 80px rgba(0,0,0,0.85); display:flex; flex-direction:column; overflow:hidden; }
.usrjrn-img-header { padding:14px 18px 8px; border-bottom:1px solid rgba(148,163,184,0.35); }
.usrjrn-img-title { margin:0; font-size:18px; font-weight:600; display:flex; align-items:center; gap:8px; color:#f9fafb; }
.usrjrn-img-body { padding:12px 18px 14px; overflow:auto; }
.usrjrn-img-divider { height:1px; background:rgba(148,163,184,0.35); }
.usrjrn-img-footer { padding:10px 18px 14px; display:flex; justify-content:flex-end; gap:10px; }

.usrjrn-img-error { margin-bottom:12px; padding:10px 12px; border-radius:8px; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.55); color:#fecaca; font-weight:600; font-size:13px; }

.usrjrn-img-cropper { display:flex; gap:16px; align-items:stretch; flex-wrap:wrap; }
.usrjrn-img-cropper-holder {
  flex:1 1 380px;
  height:clamp(320px, 60vh, 560px);
  background:#111;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border:1px solid rgba(31,41,55,0.9);
}
.usrjrn-img-cropper-img { max-width:100%; max-height:100%; display:none; }
.usrjrn-img-aspect-ghost { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60%; aspect-ratio:2 / 3; border:2px dashed rgba(248,250,252,0.4); border-radius:14px; pointer-events:auto; cursor:pointer; }
.usrjrn-img-cropper-placeholder { color:#9ca3af; font-size:13px; text-align:center; max-width:200px; cursor:pointer; }
.usrjrn-img-cropper-side { flex:1 1 220px; min-width:220px; max-width:320px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }

.usrjrn-img-btn { width:100%; border-radius:8px; padding:8px 14px; border:1px solid transparent; cursor:pointer; font-size:13px; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:all .3s ease; }
.usrjrn-img-btn-primary { background:rgba(40,167,69,0.2); color:rgba(255,255,255,0.9); border-color:rgba(40,167,69,0.3); }
.usrjrn-img-btn-primary:hover { background:rgba(40,167,69,0.3); box-shadow:0 10px 26px rgba(0,0,0,0.5); }
.usrjrn-img-btn-danger { background:rgba(248,113,113,0.16); color:#fecaca; }
.usrjrn-img-btn-danger:hover { background:rgba(248,113,113,0.26); }
.usrjrn-img-btn-success { background:rgba(34,197,94,0.18); color:#bbf7d0; }
.usrjrn-img-btn-success:hover { background:rgba(34,197,94,0.28); }
.usrjrn-img-btn[disabled] { opacity:0.5; cursor:default; box-shadow:none; transform:none; }

.usrjrn-img-meta { font-size:12px; color:#9ca3af; text-align:left; }
.usrjrn-img-progress { display:none; margin-top:6px; height:8px; background:#111827; border-radius:999px; overflow:hidden; }
.usrjrn-img-progress-bar { height:100%; width:0%; background:linear-gradient(90deg,#22c55e,#06b6d4); transition:width .25s ease; }

@media (max-width: 576px) {
  .usrjrn-img-content { width:100vw; max-height:94vh; border-radius:0; }
}

.usrjrn-view-dates { margin:0 0 10px; font-size:13px; opacity:0.85; }
.usrjrn-milestones-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.usrjrn-milestone {
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.usrjrn-milestone:hover {
  background:rgba(15,23,42,0.9);
  border-color:rgba(148,163,184,0.6);
  box-shadow:0 10px 28px rgba(0,0,0,0.7);
  transform:translateY(-1px);
}
.usrjrn-milestone-main { display:flex; flex-direction:column; gap:2px; }
.usrjrn-milestone-date { font-size:12px; opacity:0.8; }
.usrjrn-milestone-title { font-size:14px; font-weight:500; }
.usrjrn-milestone-meta { font-size:12px; opacity:0.9; }
.usrjrn-milestone-status { font-size:11px; padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:0.04em; background:rgba(255,255,255,0.06); }
.usrjrn-milestone-completed .usrjrn-milestone-status { background:rgba(46,204,113,0.2); color:#8DFFA8; }
.usrjrn-milestone-locked .usrjrn-milestone-status { background:rgba(149,165,166,0.2); color:#ecf0f1; }
.usrjrn-milestone-unlocked .usrjrn-milestone-status { background:rgba(57,145,205,0.3); color:#a8dbff; }

/* Full view layout */
.usrjrn-fullview { margin-top:12px; padding:0 0 32px; border-top:1px solid rgba(255,255,255,0.08); }
/* Fullview header μέσα στο hero: χρησιμοποιείται κυρίως για CTA "Η πρόοδός μου" και owner actions */
.usrjrn-fullview-header { display:block; margin:0 0 12px; padding:0; }
.usrjrn-fullview-header-main { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex:1 1 auto; flex-wrap:wrap; }
.usrjrn-fullview-header-text { max-width:520px; }
.usrjrn-fullview-page-title { margin:0 0 8px; font-size:26px; font-weight:700; display:none; }
.usrjrn-fullview-page-desc { margin:0; opacity:0.88; font-size:14px; display:none; }
.usrjrn-fullview-header-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto; position:relative; max-width:260px; }
.usrjrn-fullview-progress-cta { display:flex; align-items:center; gap:6px; position:relative; }
.usrjrn-fullview-progress-main[disabled] { opacity:0.5; cursor:default; pointer-events:none; }
.usrjrn-fullview-progress-info { width:24px; height:24px; border-radius:999px; border:1px solid rgba(148,163,184,0.7); background:transparent; color:#e5e7eb; font-size:13px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.usrjrn-fullview-progress-tooltip { position:absolute; right:0; top:100%; margin-top:6px; max-width:260px; padding:8px 10px; border-radius:10px; background:rgba(15,23,42,0.96); border:1px solid rgba(148,163,184,0.7); font-size:12px; color:#e5e7eb; box-shadow:0 18px 40px rgba(0,0,0,0.75); opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:5; }
.usrjrn-fullview-progress-tooltip.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.usrjrn-fullview-owner-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.usrjrn-fullview-hero {
  display:grid;
  grid-template-columns:minmax(280px, 1fr) minmax(260px, 1fr);
  gap:24px;
  align-items:stretch;
  margin-bottom:24px;
}
.usrjrn-fullview-hero-photo-wrap { position:relative; }
.usrjrn-fullview-hero-photo { border-radius: 24px;
  max-height: 450px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 50px rgba(0,0,0,0.4);
  aspect-ratio: 2/3;}
.usrjrn-fullview-hero-photo--placeholder { background:linear-gradient(135deg, rgba(57,145,205,0.3), rgba(230,57,70,0.3)); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7); font-size:18px; font-weight:600; }
.usrjrn-fullview-progress-btn { position:absolute; left:14px; top:14px; }
.usrjrn-fullview-hero-text { padding:6px 10px; }
.usrjrn-fullview-title { margin:0 0 10px; font-size:34px; font-weight:700; }
.usrjrn-fullview-desc { margin:0; opacity:0.88; line-height:1.5; }
.usrjrn-fullview-toolbar { display:none; }
/* Dates: εμφανίζονται μόνο μέσα στο timeline, κάτω από το H1 */
.usrjrn-fullview-header-text .usrjrn-fullview-dates { display:none !important; }
.usrjrn-fullview .timeline-carousel .usrjrn-fullview-dates { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; padding:0; list-style:none; font-size:13px; }
.usrjrn-fullview-dates-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:rgba(15,23,42,0.95); border:1px solid rgba(148,163,184,0.6); color:#e5e7eb;  }
.usrjrn-fullview-goals-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 0;
}
.usrjrn-fullview-goal {
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:4px 0 10px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(15,23,42,0.96);
  border:1px solid rgba(52,211,153,0.75);
  color:#e5e7eb;
  font-size:13px;
}
.usrjrn-fullview-goal-label {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:0.8;
}
.usrjrn-fullview-goal-value {
  font-size:14px;
  font-weight:600;
}
.usrjrn-fullview-goal-arrow {
  font-size:14px;
  opacity:0.9;
}
.usrjrn-fullview-dates-pill-label { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; opacity:0.75; }
.usrjrn-fullview-dates-pill-value { font-size:13px; font-weight:600; }

/* Journey-level status badge (e.g. completed) κάτω από τον κύριο τίτλο */
.usrjrn-fullview-journey-status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 10px;
  padding:5px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#22c55e,#eab308);
  color:#0f172a;
  font-size:13px;
  font-weight:600;
  box-shadow:0 10px 28px rgba(0,0,0,0.7);
}
.usrjrn-fullview-journey-status-emoji { font-size:15px; line-height:1; }
.usrjrn-fullview-journey-status-label { letter-spacing:0.03em; text-transform:uppercase; }

/* Archived journey variant: neutral grey pill with ARCHIVED label */
.usrjrn-fullview-journey-status--archived {
  background:rgba(148,163,184,0.25);
  color:#e5e7eb;
}

.usrjrn-fullview .timeline-carousel { padding: 70px 6% 70px; position: relative; overflow: hidden; }
.usrjrn-fullview .timeline-carousel:after,
.usrjrn-fullview .timeline-carousel:before { content: ""; position:absolute; top:0; height:100%; width:6%; background:transparent; z-index:3; }
.usrjrn-fullview .timeline-carousel:after { left:0; }
.usrjrn-fullview .timeline-carousel:before { right:0; opacity:0; }
.usrjrn-fullview .timeline-carousel .tl-viewport { overflow:visible; }
.usrjrn-fullview .timeline-carousel .tl-track { display:flex; will-change:transform; transition:transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.usrjrn-fullview .timeline-carousel__item { cursor:grab; transition:opacity 0.3s ease; opacity:0.35; /*padding-right:30px; */}
.usrjrn-fullview .timeline-carousel__item.is-active { opacity:1; }
.usrjrn-fullview .timeline-carousel__image { padding-right:0; }
.usrjrn-fullview .timeline-carousel__item-inner { position:relative; padding-top:45px; margin:0 0 20px; text-align:left; }
.usrjrn-fullview .timeline-carousel__item-inner:after { position:absolute; width:100%; top:45px; left:0; content:""; border-bottom:1px solid rgba(255,255,255,0.25); }
.usrjrn-fullview .timeline-carousel__item-inner .year { font-size:36px; line-height:36px; color:#fff; display:table; letter-spacing:-1px; padding:0 10px 0 0; font-weight:900; margin:-15px 0 20px; }
.usrjrn-fullview .timeline-carousel__item-inner .month { font-size:18px; text-transform:uppercase; color:#fff; display:block; margin-bottom:10px; font-weight:900; }
.usrjrn-fullview .timeline-carousel__item-inner .month span { display:block; font-size:14px; font-weight:500; opacity:0.85; text-transform:none; }
.usrjrn-fullview .timeline-carousel__item-inner .desc { font-size:16px; color:#fff; width:85%; line-height:1.7; margin-bottom:15px; }
.usrjrn-fullview .usrjrn-status-pill { display:inline-flex; align-items:center; gap:4px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:12px; background:rgba(255,255,255,0.18); color:#fff; }
.usrjrn-fullview .usrjrn-status-pill--completed { background:rgba(46,204,113,0.25); color:#9dffb7; }
.usrjrn-fullview .usrjrn-status-pill--locked { background:rgba(149,165,166,0.25); color:#dde5e8; }
.usrjrn-fullview .usrjrn-status-pill--progress { background:rgba(57,145,205,0.3); color:#a8dbff; }
.usrjrn-milestone-actions-row { display:flex; align-items:center; gap:6px; margin:8px 0 4px; }
/* Χρησιμοποίησε το ίδιο primary style με τα υπόλοιπα πράσινα κουμπιά (Καταγραφή) */
.usrjrn-btn-primary.usrjrn-milestone-progress-btn { font-weight:normal; }
.usrjrn-milestone-edit-btn,
.usrjrn-milestone-kebab-btn { width:28px; height:28px; border-radius:999px; border:1px solid rgba(148,163,184,0.7); background:rgba(15,23,42,0.9); color:#e5e7eb; font-size:13px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.usrjrn-milestone-kebab-btn { font-size:16px; line-height:1; }
.usrjrn-fullview .usrjrn-measure {
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:8px;  
}
.usrjrn-fullview .usrjrn-measure-pill {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(34,197,94,0.32),rgba(56,189,248,0.30));
}
.usrjrn-fullview .usrjrn-measure-value {
  font-size:16px;
  font-weight:700;
  letter-spacing:0.02em;
}
.usrjrn-fullview .usrjrn-measure-unit {
  font-size:13px;
  font-weight:500;
  opacity:0.9;
}
.usrjrn-fullview .usrjrn-measure-delta {
  font-size:13px;
  font-weight:500;
  opacity:0.95;
}
.usrjrn-fullview .usrjrn-measure-delta--down { color:#22c55e; }
.usrjrn-fullview .usrjrn-measure-delta--up { color:#f97316; }
.usrjrn-fullview .usrjrn-measure-delta--neutral { color:#38bdf8; }
.usrjrn-fullview .usrjrn-measure-delta--flat { color:#e5e7eb; opacity:0.75; }
.usrjrn-fullview .usrjrn-measure--secondary .usrjrn-measure-pill {
  background:linear-gradient(135deg,rgba(30,64,175,0.28),rgba(56,189,248,0.26));
}
.usrjrn-fullview .usrjrn-measure-label {
  font-size:12px;
  opacity:0.8;
}
.usrjrn-fullview .usrjrn-milestone-progress-btn {
  margin-top:8px;
  padding:5px 10px;
  font-size:12px;
}
.usrjrn-fullview .timeline-carousel__item-inner .pointer { height:29px; position:relative; margin:-4px 0 16px; }
.usrjrn-fullview .timeline-carousel__item-inner .pointer:after { position:absolute; content:""; width:9px; height:9px; border-radius:100%; top:0; left:0; background-color:#E6C229; }
.usrjrn-fullview .timeline-carousel__item-inner .pointer:before { position:absolute; content:""; width:1px; height:100%; top:0; left:4px; background-color:#E6C229; }
.usrjrn-fullview .timeline-carousel h1 { color:#fff; font-size:46px; line-height:50px; font-weight:900; margin-bottom:18px; }
.usrjrn-fullview .timeline-carousel .timeline-subtitle { margin-bottom:28px; opacity:0.9; font-size:18px; max-width:780px; }
.usrjrn-fullview .timeline-carousel .media-wrapper { opacity:1; /*padding-bottom:150%;*/ margin: 10px;
  aspect-ratio: 2/3;border-radius:18px; background:linear-gradient(135deg, rgba(57,145,205,0.3), rgba(230,57,70,0.3));  }
.usrjrn-fullview .timeline-carousel .media-wrapper--overlay { background-size:cover; background-position:center; }
.usrjrn-fullview .timeline-carousel .media-wrapper--placeholder { display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7); font-weight:600; font-size:16px; }
.usrjrn-fullview .timeline-carousel .read-more { font-size:12px; color:#E6C229; display:table; font-weight:900; text-decoration:none; position:relative; }
.usrjrn-fullview .timeline-carousel .read-more:after { content:""; position:absolute; left:0; bottom:-1px; width:0; border-bottom:2px solid #E6C229; transition:width .2s ease; }
.usrjrn-fullview .timeline-carousel .read-more:hover:after { width:100%; }
.usrjrn-fullview .tl-arrows { position:absolute; top:10px; right:6%; z-index:4; display:flex; gap:10px; }
.usrjrn-fullview .tl-arrows button { background-color:rgba(255,255,255,0.25); width:36px; height:36px; border-radius:6px; color:#E6C229; border:0; cursor:pointer; transition:background-color .25s ease, opacity .25s ease; }
.usrjrn-fullview .tl-arrows button:hover { background-color:rgba(255,255,255,0.5); }
.usrjrn-fullview .tl-arrows .is-disabled { opacity:.35; pointer-events:none; }
.usrjrn-fullview .tl-dots { list-style:none; display:flex; gap:8px; margin-top:28px; padding:0; }
.usrjrn-fullview .tl-dots li button { width:14px; height:14px;  background-color:#E6C229; opacity:.35; border:none; cursor:pointer; transition:opacity .2s ease, transform .2s ease; }
.usrjrn-fullview .tl-dots li.is-active button { opacity:1; transform:scale(1.1); }

@media (max-width:1024px) {
  .usrjrn-fullview-hero { grid-template-columns:1fr; }
  .usrjrn-fullview-header { align-items:flex-start; }
  .usrjrn-fullview-header-actions { align-items:flex-start; }
  .usrjrn-fullview .timeline-carousel__item { flex:0 0 100%; max-width:100%; padding-right:0; }
  .usrjrn-fullview .tl-arrows { position:static; justify-content:flex-start; margin-top:18px; }
  .usrjrn-modal-dialog-progress { max-width:840px; }
  .usrjrn-progress-layout { flex-wrap:wrap; }
  .usrjrn-progress-column-milestones { flex:1 1 100%; max-width:none; }
  .usrjrn-progress-column-main { flex:1 1 55%; }
  .usrjrn-progress-column-photo { flex:1 1 45%; }
}

.usrjrn-templates-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:10px; }
.usrjrn-template-card { text-align:left; border-radius:16px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); padding:12px 14px; cursor:pointer; color:#fff; box-shadow:0 12px 28px rgba(0,0,0,0.45); transform:translateY(0); transition:all .18s ease; }
.usrjrn-template-card h5 { margin:0 0 4px; font-size:15px; }
.usrjrn-template-card p { margin:0; font-size:13px; opacity:0.9; }
.usrjrn-template-card:hover { border-color:rgba(57,145,205,0.9); background:rgba(57,145,205,0.18); transform:translateY(-2px); }
.usrjrn-template-card.is-selected { border-color: rgba(0,115,170,0.9);
  box-shadow: 0 18px 40px rgba(0,0,0,0.9);
  background: linear-gradient(135deg,rgba(0,115,170,0.35),rgba(230,57,70,0.25));}

/* Wizard step fields */
.usrjrn-wizard-step h4 { margin:0 0 10px; font-size:16px; font-weight:600; }
.usrjrn-step-field { margin-bottom:14px; }
.usrjrn-step-field label { display:block; margin-bottom:4px; font-size:13px; opacity:0.9; }
.usrjrn-input { width:100%; border-radius:10px; border:1px solid rgba(255,255,255,0.16); background:rgba(5,5,15,0.9); color:#fff; padding:7px 10px; font-size:14px; outline:none; box-shadow:0 0 0 0 rgba(57,145,205,0.6); transition:all .16s ease; }
.usrjrn-input:focus { border-color:rgba(57,145,205,0.9); box-shadow:0 0 0 1px rgba(57,145,205,0.8); }
.usrjrn-step-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }

/* Edit journey modal hint + metrics list spacing */
.usrjrn-edit-hint {
  margin:8px 0 2px;
  font-size:12px;
  opacity:0.85;
  font-style:italic;
}
.usrjrn-metrics-list {
  margin-top:6px;
}
.usrjrn-input-static { pointer-events:none; opacity:0.7; }
.usrjrn-input-error { border-color:#f87171; box-shadow:0 0 0 1px rgba(248,113,113,0.9); }

/* Select2 styling inside journeys modal (Χώρος / Φίλοι) */
.usrjrn-modal .select2-container { width:100% !important; font-size:14px; }
.usrjrn-modal .select2-selection--single,
.usrjrn-modal .select2-selection--multiple {
  background:rgba(5,5,15,0.95);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
  min-height:34px;
}
.usrjrn-modal .select2-selection--single .select2-selection__rendered,
.usrjrn-modal .select2-selection--multiple .select2-selection__rendered {
  color:#e5e7eb;
  padding:4px 10px;
}
.usrjrn-modal .select2-selection--single .select2-selection__placeholder,
.usrjrn-modal .select2-selection--multiple .select2-selection__placeholder {
  color:rgba(209,213,219,0.8);
}
.usrjrn-modal .select2-selection--single .select2-selection__arrow {
  height:100%;
  right:8px;
}
.usrjrn-modal .select2-selection--multiple .select2-selection__choice {
  background:rgba(15,23,42,0.9);
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.8);
  color:#e5e7eb;
  padding:1px 7px;
  font-size:12px;
}
.usrjrn-modal .select2-selection--multiple .select2-selection__choice__remove {
  color:#9ca3af;
}
.usrjrn-modal .select2-selection--multiple .select2-selection__choice__remove:hover {
  color:#f97373;
}

.usrjrn-modal .select2-dropdown {
  background:rgba(15,23,42,0.98);
  border-radius:10px;
  border:1px solid rgba(148,163,184,0.7);
  box-shadow:0 18px 40px rgba(0,0,0,0.8);
}
.usrjrn-modal .select2-search--dropdown .select2-search__field {
  background:rgba(5,5,15,0.95);
  border-radius:8px;
  border:1px solid rgba(148,163,184,0.7);
  color:#e5e7eb;
  padding:5px 8px;
}
.usrjrn-modal .select2-results__option {
  padding:6px 10px;
  font-size:13px;
}
.usrjrn-modal .select2-results__option--highlighted[aria-selected] {
  background:linear-gradient(135deg,rgba(56,189,248,0.24),rgba(37,99,235,0.4));
  color:#f9fafb;
}
.usrjrn-modal .select2-results__option[aria-selected=true] {
  background:rgba(37,99,235,0.55);
  color:#f9fafb;
}

@media (max-width:1024px) {
  .usrjrn-card { padding:11px 12px 10px; }
  .usrjrn-card-layout { align-items:flex-start; }
  .usrjrn-actions { flex-wrap:wrap; justify-content:flex-start; }
}

@media (max-width:768px) {
  .usrjrn-fullview .timeline-carousel h1 {     font-size: 26px;line-height: 34px; }
  .usrjrn-section { padding:12px 0 0; }
  .usrjrn-card { padding:10px 11px; }
  .usrjrn-card-meta { flex-direction:column; align-items:flex-start; gap:6px; }
  .usrjrn-progress { min-width:0; width:100%; margin-bottom: 20px;}
  .usrjrn-actions { width:100%; flex-wrap:wrap; justify-content:flex-start; }
  .usrjrn-modal-dialog-progress { max-width:100%;}
  .usrjrn-modal-progress .usrjrn-modal-body { max-height:calc(100vh - 120px); overflow-y:auto; }
  .usrjrn-progress-layout { flex-direction:column; }
  .usrjrn-progress-column-milestones,
  .usrjrn-progress-column-main,
  .usrjrn-progress-column-photo { flex:1 1 auto; max-width:none; }
}

@media (max-width:576px) {
  .usrjrn-fullview-header-main {     display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
          flex-direction: column;
  }
   .usrjrn-fullview .timeline-carousel {     padding: 20px 0%; }
    .usrjrn-fullview-header-actions{    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
    position: relative;}
  .usrjrn-card-photo { max-width:none; }}