/* =========================================================
   Meditation Audio Player — player.css
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --map-primary:   #3bbfd4;
  --map-primary2:  #2a9db5;
  --map-gradient:  linear-gradient(170deg, #5ecde0 0%, #3aa8c1 40%, #2e8fa8 100%);
  --map-orange:    #f5a623;
  --map-purple:    #7b5ea7;
  --map-purple2:   #b39dca;
  --map-white:     #ffffff;
  --map-text-dark: #1a2a35;
  --map-font:      'Nunito', sans-serif;
  --map-radius:    16px;
  --map-shadow:    0 8px 32px rgba(0,0,0,0.18);
}

.map-session-card {
  font-family: var(--map-font);
  position: relative;
}

/* =========================================================
   DETAIL PAGE
   ========================================================= */
.map-detail {
  background: linear-gradient(180deg, #b8e8f0 0%, #d4f1f7 40%, #f5f5f0 100%);
  border-radius: var(--map-radius);
  overflow: hidden;
  padding: 0 0 32px;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: var(--map-shadow);
}
.map-detail__hero {
  background: var(--map-gradient);
  padding: 40px 28px 48px;
  text-align: center;
}
.map-detail__subtitle {
  color: rgba(255,255,255,0.9);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
}
.map-detail__title {
  color: var(--map-white);
  font-size: 32px;
  font-weight: 900;
  margin: 0;
  line-height: 1.2;
}

.map-detail__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.map-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 20px;
  color: var(--map-primary);
  font-family: var(--map-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.map-action-btn svg { width: 22px; height: 22px; }
.map-action-btn:hover { opacity: 0.7; }
.map-action-btn.is-active svg { fill: var(--map-orange); stroke: var(--map-orange); }
.map-action-divider { width: 1px; height: 36px; background: rgba(0,0,0,0.12); }

.map-detail__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
}
.map-detail__author-photo {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--map-primary);
}
.map-detail__author-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.map-detail__author-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--map-primary);
}
.map-detail__duration {
  font-size: 13px;
  color: #666;
  font-weight: 600;
}
.map-detail__play-small {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--map-primary);
  background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--map-primary);
  transition: background 0.2s, color 0.2s;
}
.map-detail__play-small:hover { background: var(--map-primary); color: white; }
.map-detail__play-small svg { width: 16px; height: 16px; margin-left: 2px; }

.map-detail__desc {
  padding: 0 24px;
  font-size: 15px;
  color: #2a3a45;
  line-height: 1.6;
  margin: 0 0 24px;
}

.map-play-now-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 48px);
  margin: 0 24px;
  padding: 16px;
  background: var(--map-gradient);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: var(--map-font);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(60,185,210,0.4);
}
.map-play-now-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(60,185,210,0.5); }

.map-locked-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: #555;
}
.map-locked-overlay p { font-size: 15px; margin: 0; }
.map-locked-btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--map-purple);
  color: white;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: opacity 0.2s;
}
.map-locked-btn:hover { opacity: 0.85; }

/* =========================================================
   FULLSCREEN PLAYER OVERLAY
   ========================================================= */
.map-player-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--map-gradient);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.map-player-overlay.is-open { transform: translateY(0); }

.map-player__bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s;
}
.map-player__bg-layer.has-image { opacity: 0.15; }

.map-player__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px 24px 8px;
  position: relative;
  z-index: 2;
}
.map-player__subtitle {
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  text-align: center;
}
.map-player__close {
  position: absolute;
  right: 24px;
  top: 52px;
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}
.map-player__close:hover { background: rgba(255,255,255,0.2); }

.map-player__title {
  color: white;
  font-size: 30px;
  font-weight: 900;
  margin: 4px 24px 16px;
  text-align: center;
  line-height: 1.2;
  position: relative;
  z-index: 2;
}

.map-player__illustration {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 2;
  min-height: 0;
  padding: 0 20px;
}
.map-player__illustration img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
}
.map-player__illustration-placeholder {
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}

.map-player__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 32px;
  position: relative;
  z-index: 2;
}
.map-ctrl-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  opacity: 0.9;
  transition: opacity 0.2s, transform 0.15s;
  position: relative;
}
.map-ctrl-btn:hover { opacity: 1; transform: scale(1.1); }
.map-ctrl-label {
  font-size: 10px;
  font-weight: 800;
  color: white;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.map-ctrl-btn.is-active svg { fill: var(--map-orange); stroke: var(--map-orange); }

.map-play-pause-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 2.5px solid rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  backdrop-filter: blur(4px);
}
.map-play-pause-btn:hover { background: rgba(255,255,255,0.35); transform: scale(1.05); }

.map-player__progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 24px 36px;
  position: relative;
  z-index: 2;
}
.map-time-current,
.map-time-total {
  color: white;
  font-size: 13px;
  font-weight: 700;
  min-width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.map-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
.map-progress-fill {
  height: 100%;
  background: white;
  border-radius: 4px;
  width: 0%;
  pointer-events: none;
}
.map-progress-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--map-orange);
  position: absolute;
  top: 50%; left: 0%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.map-speed-btn {
  background: rgba(0,0,0,0.35);
  border: none;
  border-radius: 6px;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  cursor: pointer;
  min-width: 46px;
  font-family: var(--map-font);
  transition: background 0.2s;
}
.map-speed-btn:hover { background: rgba(0,0,0,0.5); }
.map-speed-val { font-size: 15px; font-weight: 800; line-height: 1.2; }
.map-speed-label { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; opacity: 0.8; }

/* =========================================================
   INTENSITY RATING POPUP
   ========================================================= */
.map-rating-popup {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(30,80,100,0.3);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.map-rating-popup.is-open { opacity: 1; pointer-events: all; }

.map-rating__card {
  background: white;
  border-radius: 20px;
  padding: 32px 28px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.map-rating__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--map-text-dark);
  margin: 0 0 8px;
}
.map-rating__score {
  font-size: 40px;
  font-weight: 900;
  margin: 0 0 24px;
}
.map-rating__val { color: var(--map-purple); }
.map-rating__max { color: #c0c0c0; font-size: 32px; }

.map-rating__slider-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.map-vslider-track {
  position: relative;
  width: 12px;
  height: 300px;
  background: #e8e8e8;
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
}
.map-vslider-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--map-purple2);
  border-radius: 6px;
  height: 50%;
  pointer-events: none;
}
.map-vslider-thumb {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--map-purple);
  border: 3px solid white;
  box-shadow: 0 3px 12px rgba(123,94,167,0.5);
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  pointer-events: none;
}
.map-vslider-labels {
  position: absolute;
  left: 24px;
  top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.map-vslider-labels span {
  font-size: 13px;
  font-weight: 700;
  color: var(--map-purple);
  line-height: 1;
}

.map-rate-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #c4a8df, #9b7ec8);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: var(--map-font);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.map-rate-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* =========================================================
   CUSTOMIZE SETTINGS PANEL
   ========================================================= */
.map-customize-panel {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #f8f5f0;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  font-family: var(--map-font);
}
.map-customize-panel.is-open { transform: translateX(0); }

.map-customize__inner {
  padding: 0 0 40px;
  max-width: 600px;
  margin: 0 auto;
}
.map-customize__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 52px 20px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: white;
  position: sticky;
  top: 0;
  z-index: 2;
}
.map-customize__back {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--map-text-dark);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}
.map-customize__back:hover { background: rgba(0,0,0,0.06); }
.map-customize__header h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: var(--map-text-dark);
}
.map-customize__section { padding: 20px 20px 0; }
.map-customize__section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--map-text-dark);
  margin: 0 0 14px;
}
.map-customize__count {
  font-size: 13px;
  color: #888;
  font-weight: 600;
  margin-left: auto;
}

.map-customize__scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.map-customize__scroll::-webkit-scrollbar { display: none; }

.map-customize-item {
  flex-shrink: 0;
  width: 130px; height: 110px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.2s, transform 0.15s;
  background: #ddd;
  position: relative;
}
.map-customize-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-customize-item.is-selected { border-color: var(--map-orange); }
.map-customize-item:hover { transform: scale(1.03); }
.map-customize-item__label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: white;
  font-size: 12px;
  font-weight: 700;
}

.map-customize__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 12px;
}
.map-customize-music {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.2s;
  background: #ddd;
  position: relative;
  aspect-ratio: 16/9;
}
.map-customize-music img { width: 100%; height: 100%; object-fit: cover; }
.map-customize-music.is-selected { border-color: var(--map-orange); }
.map-customize-music__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  background: linear-gradient(transparent 40%, rgba(0,0,0,0.65));
  color: white;
  font-size: 13px;
  font-weight: 700;
}

.map-volume-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 20px;
}
.map-vol-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  background: #ddd;
  border-radius: 4px;
  outline: none;
}
.map-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--map-orange);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.map-vol-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--map-orange);
  cursor: pointer;
  border: none;
}

.map-save-settings-btn {
  display: block;
  width: calc(100% - 40px);
  margin: 24px 20px 0;
  padding: 16px;
  background: linear-gradient(135deg, #f5a623, #e8940d);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: var(--map-font);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(245,166,35,0.35);
}
.map-save-settings-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.map-loading { color: #aaa; font-size: 14px; padding: 12px; }

.map-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 12px 24px;
  border-radius: 24px;
  font-family: var(--map-font);
  font-size: 14px;
  font-weight: 600;
  z-index: 200000;
  transition: transform 0.3s;
  white-space: nowrap;
}
.map-toast.is-visible { transform: translateX(-50%) translateY(0); }