/* WRAPPER */
.p1-reel-wrapper {
    width: 100%;
    position: relative;
    padding: 20px 0;
}

/* HEADER */
.p1-reel-header {
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 30px; padding: 0 5px;
}
.p1-reel-header h3 { margin: 0; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; }
.p1-reel-line { flex-grow: 1; height: 1px; }

/* TRACK (Scroller) */
.p1-reel-track {
    display: flex;
    gap: 20px;
    overflow-x: hidden; /* Hide scrollbar, JS handles movement */
    padding-top: 20px; 
    padding-bottom: 30px; 
    
    /* FIX: Remove Scroll Snap to fix jumpy drag */
    /* scroll-snap-type: x mandatory; */ 
    
    cursor: grab;
    user-select: none; /* Crucial for dragging */
}
.p1-reel-track:active { cursor: grabbing; }

/* CARD STYLES */
.p1-reel-card {
    flex: 0 0 300px;
    border-radius: 12px;
    overflow: hidden;
    /* scroll-snap-align: start; <-- Removed */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
}
.p1-reel-card:hover {
    transform: translateY(-8px);
    z-index: 2; /* Ensure it stays on top */
}

/* --- THEME: DARK MODE (Default) --- */
.p1-reel-wrapper.is-dark .p1-reel-header h3 { color: #fff; }
.p1-reel-wrapper.is-dark .p1-reel-line { background: rgba(255,255,255,0.1); }
.p1-reel-wrapper.is-dark .p1-reel-card { background: #111; border: 1px solid rgba(255,255,255,0.1); }
.p1-reel-wrapper.is-dark .p1-reel-card:hover { border-color: rgba(255,255,255,0.3); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.p1-reel-wrapper.is-dark .p1-card-top { border-bottom: 1px solid rgba(255,255,255,0.05); }
.p1-reel-wrapper.is-dark .p1-username { color: #fff; }
.p1-reel-wrapper.is-dark .p1-dots { color: #666; }
.p1-reel-wrapper.is-dark .p1-svg { stroke: #fff; }
.p1-reel-wrapper.is-dark .p1-likes { color: #fff; }
.p1-reel-wrapper.is-dark .p1-card-caption { color: #aaa; }
.p1-reel-wrapper.is-dark .p1-user-bold { color: #fff; }

/* --- THEME: LIGHT MODE --- */
.p1-reel-wrapper.is-light .p1-reel-header h3 { color: #111; }
.p1-reel-wrapper.is-light .p1-reel-line { background: rgba(0,0,0,0.1); }
.p1-reel-wrapper.is-light .p1-reel-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.p1-reel-wrapper.is-light .p1-reel-card:hover { border-color: rgba(0,0,0,0.2); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.p1-reel-wrapper.is-light .p1-card-top { border-bottom: 1px solid rgba(0,0,0,0.05); }
.p1-reel-wrapper.is-light .p1-username { color: #111; }
.p1-reel-wrapper.is-light .p1-dots { color: #ccc; }
.p1-reel-wrapper.is-light .p1-svg { stroke: #333; }
.p1-reel-wrapper.is-light .p1-likes { color: #111; }
.p1-reel-wrapper.is-light .p1-card-caption { color: #555; }
.p1-reel-wrapper.is-light .p1-user-bold { color: #111; }

/* INNER ELEMENTS */
.p1-card-top { display: flex; align-items: center; padding: 12px; }
.p1-avatar { width: 32px; height: 32px; border-radius: 50%; background-size: cover; background-position: center; margin-right: 10px; background-color: #ddd; }
.p1-username { font-size: 13px; font-weight: 700; flex-grow: 1; }
.p1-dots { font-size: 10px; letter-spacing: 2px; }

.p1-card-img-wrap { display: block; position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; cursor: pointer; }
.p1-card-img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.5s ease; }
.p1-view-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: rgba(0,0,0,0.8); color: #fff; padding: 10px 20px; border-radius: 30px; font-size: 12px; font-weight: 700; text-transform: uppercase; opacity: 0; transition: all 0.3s ease; border: 1px solid var(--accent); backdrop-filter: blur(4px); white-space: nowrap; }
.p1-card-img-wrap:hover .p1-view-btn { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.p1-card-img-wrap:hover .p1-card-img { transform: scale(1.05); opacity: 0.9; }

.p1-card-actions { padding: 12px 12px 0; }
.p1-icon-group { display: flex; gap: 15px; margin-bottom: 8px; }
.p1-svg { width: 20px; height: 20px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; }
.p1-reel-card:hover .p1-svg { stroke: var(--accent); } 
.p1-likes { font-size: 12px; font-weight: 700; }
.p1-card-caption { padding: 8px 12px 15px; font-size: 12px; line-height: 1.4; }
.p1-user-bold { font-weight: 700; margin-right: 5px; }

@media (max-width: 768px) {
    .p1-reel-card { flex: 0 0 260px; }
}